无法从 ajax 调用中检索谷歌地图标记坐标

Cannot retrieve google map marker coordinates from ajax call

本文关键字：地图 谷歌 图标 坐标 检索 ajax 调用      更新时间：2023-09-26

我正在尝试使用 ajax 调用从 mysql 数据库中获取标记，但标记没有显示。

这是我的连接.php（ajax call 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>

当我运行连接时.php它返回：

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

我不知道这是否有效。

这是我包含 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>

以下是我的数据库图片：在此处输入图像描述

我已经为此苦苦挣扎了 2 天！

请执行以下操作：

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

或者：

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

另外，您的 $.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
                    });
                });

此外，您需要按如下方式获取 JSON：

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

为此，您需要处理PHP代码。

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);

在 sql 中选择字段时，您应该使用反引号 - 而不是单引号！此外，虽然没有经过测试，但您可能希望逐行检索记录，并将结果分配给一个数组，并在末尾回显该数组以供 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 );
?>
相关文章：