Google Maps v3 通过 jQuery $.ajax 和 json 添加标记答案

【问题标题】：Google Maps v3 adding markers via jQuery $.ajax and jsonGoogle Maps v3 通过 jQuery $.ajax 和 json 添加标记
【发布时间】：2011-07-14 17:18:50
【问题描述】：

我在使用 jquery 向 gmaps 添加地图标记时遇到问题。到目前为止，这是我的代码。

现在，我得到的错误是Uncaught ReferenceError: GLatLng is not defined

地图加载正常，并且 json 数据被正确提取和解析...据我所知... ;)

添加地图大头针/标记或您称他们为...


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

【问题讨论】：

标签： javascript google-maps jquery google-maps-api-3

【解决方案1】：

这是使它工作的代码


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

【讨论】：

【解决方案2】：

就像错误所说的那样，GLatLng is not defined。 GLatLng 来自 Google Maps API 的第 2 版，但您使用的是第 3 版，因此将其更改为 google.maps.LatLng 至少应该可以解决这个问题。

【讨论】：