Google Maps API 标记未显示 - 使用 MySQL 和 JSON

Posted 2023-02-23

【中文标题】Google Maps API 标记未显示 - 使用 MySQL 和 JSON

【英文标题】：Google Maps API markers not showing - with MySQL and JSON

【发布时间】：2014-04-23 14:31:18

【问题描述】：

我正在构建一个应用程序，将地点显示为谷歌地图上的标记。我得到了地理定位标记，但我无法让带有数据库坐标的标记显示出来。

这是我连接到数据库并执行查询的 places.php 文件。

header('Content-Type: application/json');
$response['success'] = false;
$link = new PDO('mysql:host=HOST;dbname=DATABASE', 'USERNAME', 'PASSWORD');
    $stmt = $link->prepare("SELECT name, description, lat, lng FROM places");
    $stmt->execute();
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);    
    if(!empty($result)) 
        $response['success'] = true;
        $response['data'] = $result;
    
    echo json_encode($response);

Places.php 输出：

"success":true,"data":["name":"Wim's Camping spot","description":"Large garden with nice grass. Shower available.","lat":"51.00199890137","lng":"4.47925186157","name":"Bij Laurens & Kenzo","description":"Large garden with nice grass.","lat":"50.97788238525","lng":"4.47482204437","name":"Oxford Street","description":"Large garden with nice grass. Shower available.","lat":"51.51498031616","lng":"-0.14432799816"]

这是我在初始化地图的文件中使用的脚本。 基于本教程：http://wsnippets.com/responsive-airbnb-style-google-map-property-listing-using-ajax-php-mysql-and-twitter-bootstrap/

var i = 1,
bounds,
marker,
markersArray = Array();

$(window).ready(function(e)
    initialize();
);

function initialize() 
    navigator.geolocation.getCurrentPosition(function(position) 
        var mapOptions = 
            center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
            mapTypeId: google.maps.MapTypeId.ROADMAP
        ;
        var map = new google.maps.Map(document.getElementById('js-map-container'), mapOptions);
        map.setZoom(10);


        var image = 'images/marker-current.png';
        var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
          var currentPosMarker = new google.maps.Marker(
              position: myLatLng,
              map: map,
              icon: image
          );
          getMapData();
     )  


function getMapData()
    $.getJSON('places.php',function(data)
    if(data.success == true) 
        if(data.data.length > 0)
            $.each(data.data,function(index, value)
                name = data.data[index].name;
                description = data.data[index].description;
                lat = data.data[index].latitude;
                lng = data.data[index].longitude;
                addMarker(i, name, description, lat, lng);
                i++;
            );
        
    
); 





function addMarker(i, name, description, lat, lng) 
if (lat != null && lng != null) 
    myLatLng = new google.maps.LatLng(lat, lng);
    bounds = new google.maps.LatLngBounds();
    eval('var marker' + i + ' = new google.maps.Marker( position: myLatLng,  map: map, zIndex: i);');
    var marker_obj = eval('marker' + i);
    bounds.extend(marker_obj.position);
    markersArray.push(eval('marker' + i));
    marker_obj.title = name;
    var li_obj = '.js-map-num' + i;
    var content = '<div class=""><h4>' + name + '</h4><h4><span class="label label-danger"> $'+ description +'</span></h4></div>';
    eval('var infowindow' + i + ' = new google.maps.InfoWindow( content: content,  maxWidth: 370);');
    var infowindow_obj = eval('infowindow' + i);
    var marker_obj = eval('marker' + i);
    google.maps.event.addListener(marker_obj, 'click', function () 
        infowindow_obj.open(map, marker_obj);
    );
  

【参考方案1】：

map 在initialize() 函数中定义为本地。因此您不能在addMarker() 函数中使用它。解决方案是使其全球化：

var i = 1,
bounds,
map,
marker,
markersArray = Array();
...

在initialize()函数中：

var mapOptions = 
    center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
    mapTypeId: google.maps.MapTypeId.ROADMAP
;

map = new google.maps.Map(document.getElementById('js-map-container'), mapOptions);
map.setZoom(10);
...

【讨论】：

谢谢，但没有解决。地图上仍然没有标记。

浏览器控制台是否有错误日志？还有一个问题，你为什么要使用 eval？只需定义为var marker = ...，不需要marker1 或marker2，因为您将它们推入数组。