谷歌地图v3通过jQuery添加标记$ .ajax和json
问题描述:
我有问题的使用jQuery向gmaps添加地图标记。这是我的代码到目前为止。
现在,我得到的错误是Uncaught ReferenceError: GLatLng is not defined
地图加载罚款和JSON数据被取出,并正确解析...从我可以告诉...;)
添加地图引脚/标志或你叫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);
});
}
地图初始化
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);
}
这里是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!"}]
答
像错误说,GLatLng is not defined
。 GLatLng
来自Google Maps API的第2版,但您使用的是版本3,因此将其更改为google.maps.LatLng
应该至少可以避免这种情况发生。
答
这里是使工作
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!"
});
}
代码