2

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

我似乎无法配置出一种保持标记数组填充的方法。在 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());
          }

但是此时,标记数组是空白的,因此不再保存每个标记。

如果有人能指出我正确的方向,那就太好了。谢谢

4

2 回答 2

5

getJSON 调用中指定的函数将在 getJSON 完成时调用,这不一定是在使用标记数组的代码将运行时。我认为,如果您在 getJSON 调用中指定的函数中调用 zoomIn(或任何需要使用标记的方法),那么在使用它时将填充标记。关键是标记数组是异步填充的,因此您需要确保代码执行的顺序。

如果您在 getJSON 调用之后立即检查标记数组,请不要。检查正在使用的 zoomIn 函数中的标记数组。

于 2012-09-15T15:19:54.110 回答
1

所有这些代码都在同一个范围内吗?您需要将它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将在全局范围内可用。

于 2012-09-15T15:17:50.107 回答