使用标记填充Google地图JSON

我正在尝试使用标记填充Google地图。每个标记的信息包含在此阵列中：使用标记填充Google地图JSON

[{"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); 
}

有什么办法可以解决这个问题吗？调用此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 
}); 

}

来源

2014-02-21 patrick

'gmap'声明在哪里？ – Andy

你的意思是初始化函数？ – patrick

如果你已经用'var'在'initialize'中声明'gmap'，那么其他函数将无法看到它。在函数之外声明'gmap'，例如：'var gmap'，然后在'initialize'内部执行'gmap = whatever'。 – Andy

尝试改变：

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

到：

PlotMarker(entry.lat, entry.lng);

来源

2014-02-21 15:54:53 swiss196

仍然不工作.. – patrick

尝试改变这一点：

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

要：

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

我想这是因为外[]的。

来源

2014-02-21 16:12:36 Swires

不幸的是，这似乎并没有帮助。 d更新代码的问题。 – patrick

声明您的地图变量外部的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 
    }); 
}

来源

2014-02-21 16:32:03 Andy

对不起。这也不起作用。 – patrick

把你所有的代码放在一个jsFiddle中，我会用一个squiz。 – Andy

http://jsfiddle.net/676FY/1/这是我完整的js代码。这些功能中的大部分功能都可以让用户将新点保存到数据库中。 – patrick

的主要问题是initialize()开始之前getLocations()被调用。您必须注释掉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);

来源

2014-02-21 18:04:32

你还会打电话给你初始化函数？当页面加载时调用它。

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

如图所示here。

来源

2014-02-22 00:13:41 Skitterm

这些功能的顺序是什么？你最先打电话给哪一位？

我遇到过这种问题，会发生什么情况是，地图还没有完成加载所有的瓷砖，所以标记不能放在那些，所以他们不出现。但是，当您检查控制台时，标记对象就在那里。

这是我如何解决它：

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

它保证了地图图块正密谋标记之前完全加载。在这种情况下，标记肯定是可见的。

来源

2014-03-12 10:41:47 Carmela

使用标记填充Google地图JSON

回答

相关问题