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"}]

但是，我的地图没有显示标记。我在我的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);
}

有什么方法可以解决这个问题吗？调用此网址

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函数的地图变量在之外。这是其他功能能够看到它的唯一方式：

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

Answer 2

尝试更改：

PlotMarker(entry.location.lat, entry.location.lng);

为：

PlotMarker(entry.lat, entry.lng);

Answer 3

尝试更改此内容：

PlotMarker(entry.location.lat, entry.location.lng);

要：

PlotMarker(json[i].lat, json[i].lng);

我认为这是因为外部[]的。

Answer 4

主要问题是在getLocations()启动之前调用了initialize()。您必须将getLocations();注释掉并将其移至initialize()函数的末尾。

这还不够：map定义必须移到initialize()函数之外，不应在initialize()函数内重新定义。

markerLocations中使用的

PlotMarker()未定义。应定义为全局，如map

var map;
var markerLocations = [];

function initialize() {
    ...
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 13,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    ...
    getLocations();
}

PlotMarker()必须被称为：

PlotMarker(entry.lat, entry.lng);

Answer 5

你有没有打电话给你的初始化功能？在页面加载时调用它。

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

如图所示here。

Answer 6

这些功能的顺序是什么？你先打电话给谁，然后打电话给谁？

我遇到过这种问题，发生的情况是，地图尚未完成加载所有图块，因此标记无法放置在那些图块上，因此它们不会出现。但是当您在控制台中检查时，标记对象就在那里。

这就是我解决它的方法：

google.maps.event.addListener(map, 'tilesloaded', function() {
    plotMarkers();
    google.maps.event.clearListeners(map, 'tilesloaded');
});

确保在绘制标记之前完全加载地图图块。在这种情况下，标记肯定会可见。

用标记JSON填充谷歌地图

6 个答案: