Question

我目前正在处理一个页面，该页面最终会将一系列标记（它们的数据来自JSON对象）绘制到Google地图上。

我似乎无法配置一种保持标记数组填充的方法。在getJSON调用范围之外，数组为空。

   var markers = [];
   var map;
   var mapOptions = {
            center: new google.maps.LatLng(0.0, 0.0),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          }
   map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

   $.getJSON("Home/GetLocations", function (data) {
       for (index in data) addMarker(data[index]);

       function addMarker(_data) {
           var marker = new google.maps.Marker({
               position: new google.maps.LatLng(_data.lat, _data.lng),
               map: map,
               title: _data.name
           });
           markers.push(marker);

       }
       //markers = 3 at this point.
   });
   // markers = 0 at this point.

我需要仍然填充数组的原因是，我打算在页面上创建每个标记的超链接，以便可以单击它并将地图缩放到正确的标记。理想情况下，这将是一个带有javascript函数调用的超链接，这个javascript函数将传递选定的超链接的标记索引作为参数，允许我去，例如

function zoomIn(selectedIndex) {
            map.setCenter(markers[selectedIndex].getPosition());
          }

但此时，markers数组是空白的，因此不再保留每个标记。

如果有人能指出我正确的方向那将是伟大的。感谢

Answer 1

当getJSON完成时，将调用getJSON调用中指定的函数，这不一定在使用markers数组的代码运行时。我想如果你在getJSON调用中指定的函数内调用zoomIn（或任何需要使用标记的东西），标记将在使用它时被填充。关键是MARK数组是异步填充的，因此您需要确保代码执行的顺序。

如果您在getJSON调用之后立即检查markers数组，请不要。检查zoomIn函数中的markers阵列，使用它。

Answer 2

所有这些代码都在同一范围内吗？您需要在全局范围内使用此var markers = [];，以便可以从所有函数访问它。

所以做这样的事情：

var markers = [];
var map;
var mapOptions = {
        center: new google.maps.LatLng(0.0, 0.0),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
function init(){
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

   $.getJSON("Home/GetLocations", function (data) {
   for (index in data) addMarker(data[index]);

   function addMarker(_data) {
       var marker = new google.maps.Marker({
           position: new google.maps.LatLng(_data.lat, _data.lng),
           map: map,
           title: _data.name
       });
       markers.push(marker);

   }    
   });
}

function zoomIn(selectedIndex) {
        map.setCenter(markers[selectedIndex].getPosition());
      }

然后数组markers将在全球范围内可用。

Javascript中的全局数组范围问题

2 个答案: