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

Question

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

这是我连接到数据库并执行查询的地方.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"}]}

这是我在初始化 map 的文件中使用的脚本。 基于本教程: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);
    });
  }
}

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