javascript - 使用标记 JSON 填充谷歌地图

Question

我正在尝试用标记填充谷歌地图。每个标记的信息都包含在这个数组中:

[{"id":"1","name":"toler","lng":"110.33929824829102","lat":"-7.779369982234709","created_at":"2014-02-21 16:19:28","updated_at":"2014-02-21 16:19:28"},{"id":"2","name":"hallo :)","lng":"110.36865234375","lat":"-7.797738383377609","created_at":"2014-02-21 16:19:49","updated_at":"2014-02-21 16:19:49"}]

但是，我的 map 没有显示标记。我在我的 javascript 中使用这段代码:

getLocations();

 function getLocations() {

   alert('hello');
    $.ajax({
        type: "GET",
        url: "http://localhost:8888/public/test",
        dataType: "jsonp",
        success: function(json){
            $.each(json, function(i, entry){
                PlotMarker(json[i].lat, json[i].long);
            });
        },
        error: function(err){
            console.log(err);
        }
    });
}

function PlotMarker(lat, long){
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, long),
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP
    });
    markerLocations.push(marker);
}

有什么办法可以解决这个问题吗？调用这个 url

http://localhost:8888/public/test 

返回上面显示的 JSON。

如有任何帮助，我们将不胜感激。

谢谢。

编辑:

function initialize() {

var markers = [];
var latLng = new google.maps.LatLng(-7.8,110.3666667);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

}

Answer 1

在 initialize 函数的外部声明您的 map 变量。这是其他函数能够看到它的唯一方法:

var map;
function initialize() {
  var markers = [];
  var latLng = new google.maps.LatLng(-7.8,110.3666667);
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 13,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
}