新手javascript范围问题

Question

I know a bit about what scope is, i am new to javascript and have hit a full stop in my code. Here is the code that i use.

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;
}

Needless to say its google maps. Problem is that due to scope, javascript cant access the map variable that is required to draw the polylines. Help is highly appreciated!

Answer 1

because map is declared inside the function initialize , clicked can't access it you need to declare it outside initialize like

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;
}

now clicked can access it because it's outside the initialize scope

Answer 2

You can move map to the global scope.

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

If you're concerned with polluting the global scope, you can put both inside a single function to preserve the namespace:

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

Answer 3

If you are referring to getting the map variable from your initialize function, here is what you would need to do.

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;
}

What I have done is declare map outside the initialize function. In this case, it will have global scope to all of your Javascript code that you can call later. The initialize function will be able to set it for you and the AJAX call will be able to read it.

An alternative to declaring map outside of the initialise function would be using window.map which assigns it as the map property on the window object. As the window object can be accessed anywhere as it is global, you just need to call window.map to read and write to it anywhere.

Answer 4

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