Javascript中的全局数组范围问题答案

【问题标题】：Global array scope issue in JavascriptJavascript中的全局数组范围问题
【发布时间】：2012-09-15 15:13:18
【问题描述】：

我目前正在处理一个页面，该页面最终将在 Google 地图上绘制一系列标记（它们的数据来自 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());
          }

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

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

【问题讨论】：

标签： javascript jquery asp.net-mvc google-maps-api-3 scope

【解决方案1】：

getJSON 调用中指定的函数将在 getJSON 完成时调用，这不一定在使用标记数组的代码运行时。我认为，如果您在 getJSON 调用中指定的函数内调用 zoomIn（或任何需要使用标记的方法），则在使用它时将填充标记。关键是markers数组是异步填充的，所以你需要保证你的代码执行的顺序。

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

【讨论】：

哦，好点。在填充数组之前，我没有考虑到 OP 正在调用 zoomIn。
对 ZoomIn 的调用是否可以从超链接的单击事件中访问，如果它在 getJSON 调用中，我认为它会引发“未定义”错误？
@AndyGreen 为什么你认为它不会被定义？
我添加了函数 zoomIn(selectedIndex){ alert('hello'); };在 getJSON 调用中，但当我使用 onclick="zoomIn(index);" 单击
时，得到“Microsoft JScript 运行时错误：'zoomIn' 未定义”

换句话说，我认为阻止您的原始设计工作的唯一原因是检查标记数组的错误语句......

【解决方案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 将在全局范围内可用。

【讨论】：