无法通过 Ajax 向 Google 地图添加标记

Question

我想要达到的目标：

生成地图
获取地图的边界信息
使Ajax调用传递Bounds信息，返回数据为Marker信息
用标记填充地图

我卡住了，因为我无法让 Ajax 调用触发。

代码似乎在警报 ("ajax ready") 后停止运行ning。我在我的控制器操作上有一个永远不会被击中的断点。

我遇到的唯一错误是 "nE is undefined"，但是如果我在设置值后发出警报，则会显示该值，所以我什至不确定这是相关的.

我已经成功地使用了 Google 地图的早期版本，V3 似乎有点不同。在将它们放置在事件侦听器中之前，我无法获得将边界设置为运行的代码行。我对 Ajax 调用进行了同样的尝试，但没有任何区别。

我知道我不会在 ajax 调用中将标记添加到地图，我还没有完成那部分。

Javascript:

function initMap() {

var markers = [];

 var map = new google.maps.Map(document.getElementById('local-map'), {
    center: { lat: 51.509865, lng: -0.118092 },
    zoom: 15
});
 var bounds = undefined;
 var nE = undefined;
 var sW = undefined;

 google.maps.event.addListener(map, 'bounds_changed', function () {
     bounds = map.getBounds();
     nE = bounds.getNorthEast();
     sW = bounds.getSouthWest();
 });

alert("ajax ready");
$.ajax({
    type: "POST",
    url: '/Home/GetMapMarkers',
    data: { neLatitude: nE.lat(), neLongitude: ne.lng(), swLatitude: sW.lat(), swLongitude: sW.lng() }
}).done(function (data) {

    for (i = 0; i < data.length; i++)
    {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(data[i].Latitude, data[i].Longitude),
            map: map,
            title: data[i].RestaurantName
        });
        markers.push(marker);
    }

});

}

Answer 1

"bounds_changed" 侦听器将在地图边界更改时异步触发。您需要将 AJAX 调用放在其回调函数中（when/where 新边界可用）：

google.maps.event.addListener(map, 'bounds_changed', function () {
   bounds = map.getBounds();
   nE = bounds.getNorthEast();
   sW = bounds.getSouthWest();

  alert("ajax ready");
  $.ajax({
    type: "POST",
    url: '/Home/GetMapMarkers',
    data: { neLatitude: nE.lat(), neLongitude: ne.lng(), swLatitude: sW.lat(), swLongitude: sW.lng() }
    }).done(function (data) {
      for (i = 0; i < data.length; i++)
      {
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(data[i].Latitude, data[i].Longitude),
          map: map,
          title: data[i].RestaurantName
        });
        markers.push(marker);
      }
    });
});

无法通过 Ajax 向 Google 地图添加标记

Trouble Adding Markers to Google Maps via Ajax

ajax

google-maps

google-maps-markers