Question

我知道一下范围是什么，我是javascript的新手并且在我的代码中完全停止了。这是我使用的代码。

function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(37.775057,-122.419624),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"),
          mapOptions);
      }
google.maps.event.addDomListener(window, 'load', initialize);
function clicked(id) {
  $.ajax({
    type: "GET",
    url: 'response.php',
    data: {id: id},
    success: function (lats) {
      var obj = $.parseJSON(lats);
      var line = [];
      for (var i = obj.length - 1; i >= 0; i--) {
        line.push(new google.maps.LatLng(obj[i].latitude, obj[i].longitude));
      };
      var polyPath = new google.maps.Polyline({
    path: line,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
      polyPath.setMap(map);
      console.log(polyPath);
    }
  });
  return false;
}

毋庸置疑谷歌地图。问题是由于范围，javascript无法访问绘制折线所需的地图变量。非常感谢帮助！

Answer 1

因为map在函数initialize内声明，clicked无法访问它，您需要在初始化之外声明它，如

var map = null;
function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(37.775057,-122.419624),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map-canvas"),
          mapOptions);
    }
google.maps.event.addDomListener(window, 'load', initialize);
function clicked(id) {
  $.ajax({
    type: "GET",
    url: 'response.php',
    data: {id: id},
    success: function (lats) {
      var obj = $.parseJSON(lats);
      var line = [];
      for (var i = obj.length - 1; i >= 0; i--) {
        line.push(new google.maps.LatLng(obj[i].latitude, obj[i].longitude));
      };
      var polyPath = new google.maps.Polyline({
    path: line,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
      polyPath.setMap(map);
      console.log(polyPath);
    }
  });
  return false;
}

现在clicked可以访问它，因为它超出了initialize范围

Answer 2

您可以将map移至全局范围。

var map;
function initialize() {
    ...
    map = ....;
}

如果您担心污染全局范围，可以将两者放在一个函数中以保留命名空间：

(function() {
     var map;
     function initialize() {
         ...
         map = ....;
     }
     ...(everything else) ...
})();

Answer 3

如果您指的是从initialize函数中获取地图变量，那么您需要执行以下操作。

var map;
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(37.775057,-122.419624),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function clicked(id) {
    $.ajax({
        type: "GET",
        url: 'response.php',
        data: {id: id},
        success: function (lats) {
            var obj = $.parseJSON(lats);
            var line = [];
            for (var i = obj.length - 1; i >= 0; i--) {
                line.push(new google.maps.LatLng(obj[i].latitude, obj[i].longitude));
            };
            var polyPath = new google.maps.Polyline({
                path: line,
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
            polyPath.setMap(map);
            console.log(polyPath);
        }
    });
    return false;
}

我所做的是在初始化函数之外声明map。在这种情况下，它将具有您可以稍后调用的所有Javascript代码的全局范围。初始化函数将能够为您设置它，AJAX调用将能够读取它。

在初始化函数之外声明map的替代方法是使用window.map将其指定为窗口对象上的map属性。由于窗口对象可以在任何地方访问，因为它是全局的，您只需要调用window.map来随处读取和写入。

Answer 4

快速但不推荐的解决方案是删除地图前面的var，使其成为全局变量。

新手javascript范围问题

4 个答案: