Google Map 变量的范围及调用方法

Question

我正在使用 Google Maps API 来熟悉 JavaScript。我是一个糟糕的程序员，所以请原谅我。

我不太清楚为什么下面的代码不起作用，你可以在这里检查 JSFiddle：http://jsfiddle.net/m9QLx/

var map;

function initialize() {

var myOptions = {
      center : new google.maps.LatLng(34.053228, -118.259583),
      zoom   : 11,
      zoomControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    },

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

};

google.maps.event.addDomListener(window, 'load', initialize);

map.panTo(new google.maps.LatLng(37.4569, -122.1569));

一切正常，但我不确定为什么

panTo

方法不起作用，据我所知，在所有函数之外声明 var map 使其成为全局的，然后我在

initialize()

函数中设置 map但在这个

initialize()

函数之外，

panTo

方法不起作用，地图似乎未定义。

我确信我犯了一个菜鸟错误，但我找不到答案（我确信我在谷歌搜索错误的东西）。

Answer 1

您尝试在地图初始化之前使用map.panTo方法。

这会导致初始化函数在页面触发其“load”事件时运行（完整的 DOM/页面已渲染）：

google.maps.event.addDomListener(window, 'load', initialize);

这会在“load”事件触发并且地图变量初始化之前立即执行：

map.panTo(new google.maps.LatLng(37.4569, -122.1569));

所以它没有任何作用。您应该在地图初始化后将其移至初始化函数中。

var map;

function initialize() {

var myOptions = {
      center : new google.maps.LatLng(34.053228, -118.259583),
      zoom   : 11,
      zoomControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.panTo(new google.maps.LatLng(37.4569, -122.1569));    
};

google.maps.event.addDomListener(window, 'load', initialize);