Google地圖變量的範圍和調用方法

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

一切工作正常，但我不知道爲什麼啞劇方法不工作，據我所知，在所有函數之外聲明var map使其成爲全局函數，然後在initialize（）函數中設置映射，但在此initialize（）函數之外，panTo方法不起作用，map顯示爲未定義。

我敢肯定，我正在犯一個菜鳥的錯誤，但我找不到答案（我確定我在用谷歌搜索錯誤的東西）。

謝謝，如果任何人都可以拯救我的理智。

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