谷歌地图 v3 - ajax 调用完成后添加标记答案

【问题标题】：google maps v3 - Add markers after ajax call completes谷歌地图 v3 - ajax 调用完成后添加标记
【发布时间】：2016-01-11 16:30:16
【问题描述】：

我正在尝试使用 ajax 调用在 Google 地图上加载标记。 ajax 调用需要很长时间，但在 ajax 调用完成之前加载地图。所以我在地图上看不到标记。

代码如下：

<script type="text/javascript">
var map;
function initialize() {
    var myLatlng;
    var mapOptions;     
    myLatlng = new google.maps.LatLng("29.9844", "-95.33389");
    mapOptions = {
                zoom: 12,   
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP };

   map = new google.maps.Map(
   document.getElementById("map-canvas"), mapOptions);
 google.maps.event.addListenerOnce(map, 'idle', function() {
         getRegions( function( result ) {
            alert("getRegions callback return value : " +  result.regionList );
          addMarkersAtRegionCenter(result );
        });
    });
}
</script>
function addMarkersAtRegionCenter(result) {
    var length = result.regionList.length;
     for(var i=0; i<length; i++)
     {
        var image = result.regionList[i].imageIcon;
        var marker = new google.maps.Marker({
        position: new google.maps.LatLng(result.regionList[i].centerLatitude,result.regionList[i].centerLongitude),
                  icon: image,
                  map: map
});

google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() {
                    window.location.href = marker.url;
               }
             })(marker, i));
     }
 }
function getRegions(regions, callbackRegions) {
  $.ajax({
        type : 'POST',
        url : 'getRegions.jsp',
        data : {regions: regions},
        dataType: "json",
        success : function(result, textStatus, jqXHR) {
            // invoke the callback function here
               callbackRegions(result);
         },
        error: function (result, textStatus, errorThrown) {
            // invoke the callback function here
               callbackRegions(result);
        }
 });
}

我收到了服务器的响应，我可以在浏览器中看到。我在下面给出回应：

{"regionList":[{"centerLongitude":-95.34890747070312,"imageIcon":"../images/untested-icon.png","centerLatitude":29.980682373046875},{"centerLongitude":-95.34890747070312," imageIcon":"../images/untested-icon.png","centerLatitude":29.988117218017578},{"centerLongitude":-95.33389282226562,"imageIcon":"../images/untested-icon.png","centerLatitude ":29.980682373046875},{"centerLongitude":-95.33389282226562,"imageIcon":"../images/untested-icon.png","centerLatitude":29.988117218017578}]}

但我无法在上述代码的警报消息中获得该响应。知道这里有什么问题吗？

感谢您的帮助。

【问题讨论】：

我在下面的代码中使用了 ajax 调用。 google.maps.event.addListenerOnce(map, 'idle', function() { Ajax call in the method.getAirportRegions(regions, kpiName, selectedCarrier); });
请编辑您的问题以将您的代码包含在您遇到问题的 cmets 中。请不要将代码放在 cmets 中，因为它太难阅读了
在下面查看我的答案 - 我根据您的代码更新了它。

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

【解决方案1】：

现在我可以看到您的代码，我发现您的 getRegions 函数存在问题。当您调用 getRegions 时，您唯一传入的回调函数。

getRegions( function( result ) {
            alert("getRegions callback return value : " +  result.regionList );
          addMarkersAtRegionCenter(result );
        });

问题是函数需要两个参数：

function getRegions(regions, callbackRegions)...

在您的成功函数中，您调用 callbackRegions 但它是未定义的。

创建一个名为regionsLoaded的单独回调函数：

function regionsLoaded(result)
{
    alert("getRegions callback return value : " +  result );
}

将您的 getRegions 函数更改为以下内容：
```
function getRegions(callbackRegions)...
```

然后像这样拨打电话：

google.maps.event.addListenerOnce(map, 'idle', function() 
     {
    var regions =  getRegions(regionsLoaded);                       
});

这里有一个JS fiddle来帮助你https://jsfiddle.net/loanburger/ugebw5hb/

【讨论】：