无法从Ajax调用中检索Google地图标记坐标

Question

I'm trying to fetch markers from a mysql database using ajax call, but the markers are not showing up. 我正在尝试使用ajax调用从mysql数据库中获取标记，但是标记未显示。

Here is my connect.php(ajax call connect.php) 这是我的connect.php（ajax调用connect.php）

<code>
<?php

$dbname            ='u769748933_tr'; //Name of the database
$dbuser            ='u769748933_ta'; //Username for the db
$dbpass            ='adamas'; //Password for the db
$dbserver          ='mysql.1freehosting.com'; //Name of the mysql server

$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
mysql_select_db("$dbname") or die(mysql_error());
$query = mysql_query("SELECT 'lat','lon' FROM poi_example");
$row = mysql_fetch_array($query);
//Encode the $locations array in JSON format and print it out.
header('Content-Type: application/json');
echo json_encode($row);
?>
</code>

When I run connect.php it returns: 当我运行connect.php时，它返回：

{"0":"lat","lat":"lat","1":"lon","lon":"lon"}

I don't know if this is valid. 我不知道这是否有效。

Here is my javascript file containing the ajax call: 这是我的包含ajax调用的javascript文件：

<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Google Map API V3 with markers</title>
 <style type="text/css">
 body { font: normal 10pt Helvetica, Arial; }
 #map { width: 350px; height: 300px; border: 0px; padding: 0px; }
 </style>
 <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
 <script type='text/javascript' src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script type='text/javascript' src='http://code.jquery.com/jquery-ui-1.8.14.custom.min.js'></script>


<script>
function initialize() {
var myLatlng = new google.maps.LatLng(51.514980,-0.144328);
var mapOptions = {
zoom: 14,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);




    //When the Window finishes loading...
    $(window).load(function () {

        //Carry out an Ajax request.
        $.ajax({
            url: 'connect.php',
            success:function(data){
                //Loop through each location.
                $.each(data, function(){
                    //Plot the location as a marker
                    var pos = new google.maps.LatLng(this.lat, this.lon); 
                    new google.maps.Marker({
                        position: pos,
                        map: map
                    });
                });
            }
        });

    });
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>





<body style="margin:0px; border:0px; padding:0px;">
 <div id="map"></div>
 </body>
 </html>

below is my database picture: enter image description here 以下是我的数据库图片：在此处输入图片说明

I've been struggling with this for 2 days! 我已经为此努力了2天！

Answer 1

Please do the following: 请执行以下操作：

 $.ajax({
            url: 'connect.php',
            dataType: 'json',
            success:function(data){
            ...

Or Alternatively: 或者：

success: function(data){
   data = $.parseJSON(data);
...

Also, Your $.each is incorrect, please make the following tweaks: 另外，您的$ .each不正确，请进行以下调整：

$.each(data, function(ind, val){
                    //Plot the location as a marker
                    var pos = new google.maps.LatLng(val.lat, val.lon); 
                    new google.maps.Marker({
                        position: pos,
                        map: map
                    });
                });

Also, you need to get your JSON as follows: 另外，您需要按以下方式获取JSON：

{"lat": "-73.899877", "lon" : "59.8765"}

For this you need to work upon your PHP code. 为此，您需要处理您的PHP代码。

PHP Code Changes PHP代码更改

$dbname            ='u769748933_tr'; //Name of the database
$dbuser            ='u769748933_ta'; //Username for the db
$dbpass            ='adamas'; //Password for the db
$dbserver          ='mysql.1freehosting.com'; //Name of the mysql server

$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
mysql_select_db("$dbname") or die(mysql_error());
$query = mysql_query("SELECT 'lat','lon' FROM poi_example");
$result = array();
while($row = mysql_fetch_array($query)){
    array_push($result, array(
        'lat' => $row['lat'],
        'lon' => $row['lon']
    ));
}

echo json_encode($result);

Answer 2

When selecting fields in the sql you should use backticks - NOT single quotes! 在sql中选择字段时，应使用反引号-不能使用单引号！ Also, whilst not tested, you might wish to retrieve the records row by row and assign the results to an array which you echo at the end for the javascript callback to use. 另外，虽然未经测试，但您可能希望逐行检索记录，并将结果分配给您在最后回显以供JavaScript回调使用的数组。

<?php

    $dbname            ='u769748933_tr'; //Name of the database
    $dbuser            ='u769748933_ta'; //Username for the db
    $dbpass            ='adamas'; //Password for the db
    $dbserver          ='mysql.1freehosting.com'; //Name of the mysql server

    $dbcnx = mysql_connect( $dbserver, $dbuser, $dbpass );
    mysql_select_db( $dbname ) or die('unable to connect to database');

    $data=array();
    $query = mysql_query("SELECT `lat`,`lon` FROM `poi_example`");
    if( $query ){

        while( $rs=mysql_fetch_assoc( $query ) ){
            $data[]=array( 'lat'=>$rs['lat'], 'lng'=>$rs['lng'] );
        }

    }

    header('Content-Type: application/json');
    echo json_encode( $data );
?>

无法从Ajax调用中检索Google地图标记坐标

问题描述

2 个解决方案

解决方案1
0 2016-03-17 06:12:47

解决方案2
0 2016-03-19 12:01:46

无法从Ajax调用中检索Google地图标记坐标

问题描述

2 个解决方案

解决方案1 0 2016-03-17 06:12:47

解决方案2 0 2016-03-19 12:01:46

解决方案1
0 2016-03-17 06:12:47

解决方案2
0 2016-03-19 12:01:46