google maps v3 - Добавить маркеры после завершения вызова ajax

Question

Я пытаюсь загрузить маркеры на карте Google с помощью ajax-вызова. Вызов 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": "../ изображений/непроверенных-icon.png", "centerLatitude": +29,980682373046875} , { "centerLongitude": - +95,34890747070312, "ImageIcon": "../ изображений/непроверенный-icon.png", "centerLatitude": 29,988117218017578}, { "centerLongitude": - +95,33389282226562, "ImageIcon":»../ изображения /untested-icon.png","centerLatitude":29.980682373046875},{"centerLongitude":-95.33389282226562,"imageIcon":"../images/untested-icon.png","centerLatitude":29.988117218017578}]}

Но я не могу получить ответ в предупреждающем сообщении в приведенном выше коде. Любая идея, в чем проблема?

Примите во внимание вашу помощь.

Answer 1

Теперь, когда я вижу ваш код, я вижу проблему с вашей функцией getRegions. Когда вы вызываете getRegions, вы только передаете функцию обратного вызова.

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

Проблема заключается в том, что функция ожидает два параметра:

function getRegions(regions, callbackRegions)... 

В функции успеха вашего призвания callbackRegions но это будет неопределенной.

1. Создайте отдельную функцию обратного вызова с именем regionsLoaded:

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

2. Изменить вашу функцию getRegions к следующему:

   function getRegions(callbackRegions)... 
   

3. Затем сделайте ваш звонок, как это:

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

Вот скрипка JS, чтобы помочь вам https://jsfiddle.net/loanburger/ugebw5hb/