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

时间:2013-11-03 13:01:15

标签: javascript api google-maps variables scope

我正在使用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方法不起作用,map似乎是未定义的。

我确定我犯了一个菜鸟错误,但我找不到答案(我确定我在Google上搜索错误的内容)。

谢谢,如果有人能救我的理智。

1 个答案:

答案 0 :(得分:1)

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

这会导致初始化函数在页面触发“load”事件(已呈现完整的DOM /页面)时运行:

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

在“load”事件触发并初始化map变量之前立即执行:

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