javascript Google Maps v3 通过 jQuery $.ajax 和 json 添加标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5294024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps v3 adding markers via jQuery $.ajax and json
提问by Peter
Im having problem's adding map markers to gmaps using jquery. Here is my code so far.
我在使用 jquery 将地图标记添加到 gmap 时遇到问题。到目前为止，这是我的代码。
Right now, the error I am getting is Uncaught ReferenceError: GLatLng is not defined
现在，我得到的错误是 Uncaught ReferenceError: GLatLng is not defined
The map loads fine and the json data is being fetched and parsed properly... From what I can tell... ;)
地图加载正常，并且 json 数据正在被正确获取和解析......据我所知......;）
Adding Map Pins/markers or w/e you call em...
添加地图图钉/标记或 w/e 您调用 em...
EventsModel.prototype.fetchMapPoints = function()
{
$.ajax({
dataType: "json",
url: '../../events/map',
success: eventsV.writeMapPoints
});
}
EventsView.prototype.writeMapPoints = function(Locations)
{
if (Locations.length>0) {
for (i=0; i<Locations.length; i++) {
var location = Locations[i];
eventsV.addMapPin(location);
}
//zoomToBounds();
}
}
EventsView.prototype.addMapPin = function(location)
{
var point = new GLatLng(location.lat, location.lng);
var marker = new GMarker(point);
map.addOverlay(marker);
bounds.extend(marker.getPoint());
$("<li />")
.html(location.name)
.click(function(){
showMessage(marker, location.name);
})
.appendTo("#list");
GEvent.addListener(marker,"click", function(){
showMessage(this);
});
}
Map Initialization
地图初始化
EventsModel.prototype.fetchGmapScript = function()
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=eventsV.initializeMap";
document.body.appendChild(script);
}
EventsView.prototype.initializeMap = function()
{
var myLatlng = new google.maps.LatLng(coords.lat, coords.long);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("Map"), myOptions);
}
Here is what the json data looks like
这是json数据的样子
[{"Event":"c16a5320fa475530d9583c34fd356ef5","lat":"37.8966942","lng":"-122.0599376","Image":"321752348.png","name":"Winning apple store","Description":""},{"Event":"b6d767d2f8ed5d21a44b0e5886680cb9","lat":"37.8995050","lng":"-122.0619770","Image":"","name":"Koreana Kitchen","Description":"Peter isn't invited!"}]
回答by Haochi
Like the error says, GLatLng is not defined. GLatLngis from version 2 of the Google Maps API but you are using version 3, so change it to google.maps.LatLngshould at least get that out of the way.
就像错误所说的那样，GLatLng is not defined。GLatLng来自 Google Maps API 的第 2 版，但您使用的是第 3 版，因此将其更改google.maps.LatLng为至少应该不会妨碍它。
回答by Peter
Here is the code that made it work
这是使它工作的代码
EventsView.prototype.addMapPin = function(location)
{
var myLatlng = new google.maps.LatLng(location.lat,location.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
}
