google map api v3，getBound（）;不會返回當前視口的緯度/經度範圍

Question

我需要將我的mashup頁面的代碼從google map api v2升級到v3。但getBound（）不適用於新代碼！錯誤在哪裏？謝謝你advace。

舊的代碼爲：

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key= (my key api)" 
     type="text/javascript"></script> 

    <script type="text/javascript"> 

    function updateStatus() { 
     var div = document.getElementById('mapinfo'); 
     div.innerHTML = map.getBounds(); 

     document.forms[0].lat0.value = map.getBounds().getSouthWest().lat(); 
     document.forms[0].lon0.value = map.getBounds().getSouthWest().lng(); 
     document.forms[0].lat1.value = map.getBounds().getNorthEast().lat(); 
     document.forms[0].lon1.value = map.getBounds().getNorthEast().lng(); 

     get_pictures(); 

    } 

    function onMapMove() { 
     //map.setCenter(map.getCenter()); 
     updateStatus(); 
    } 

    function onMapZoom(oldZoom, newZoom) { 
     //map.setCenter(map.getCenter(),newZoom) 
     updateStatus(); 
    } 


    function load() { 
     if (GBrowserIsCompatible()) { 
     var map = new GMap2(document.getElementById("map")); 
     window.map = map 
     map.setCenter(new GLatLng(41.879786443521795,12.427597045898438), 6); 
     map.addControl(new GSmallMapControl()); 
     map.addControl(new GMapTypeControl()); 
     window.kh = new GKeyboardHandler(map); 

     GEvent.addListener(map,'moveend',onMapMove); 
     GEvent.addListener(map,'zoomend',onMapZoom); 
     updateStatus(); 
     } 
    } 

    </script> 

新代碼：

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key= (my api key)" 
     type="text/javascript"></script> 

     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 

     <script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?libraries=weather&sensor=true"> 
</script> 

    <script type="text/javascript"> 

    function updateStatus() { 
     var div = document.getElementById('mapinfo'); 
     div.innerHTML = map.getBounds(); 

     document.forms[0].lat0.value = map.getBounds().getSouthWest().lat(); 
     document.forms[0].lon0.value = map.getBounds().getSouthWest().lng(); 
     document.forms[0].lat1.value = map.getBounds().getNorthEast().lat(); 
     document.forms[0].lon1.value = map.getBounds().getNorthEast().lng(); 

     get_pictures(); 

    } 

    function onMapMove() { 
     //map.setCenter(map.getCenter()); 
     updateStatus(); 
    } 

    function onMapZoom(oldZoom, newZoom) { 
     //map.setCenter(map.getCenter(),newZoom) 
     updateStatus(); 
    } 

    function load() { 
     if (GBrowserIsCompatible()) { 

     var mapOptions = { 
     zoom: 6, 
     center: new google.maps.LatLng(41.879786443521795,12.427597045898438), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

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

     var weatherLayer = new google.maps.weather.WeatherLayer({ 
     temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS 
     }); 
     weatherLayer.setMap(map); 

     var cloudLayer = new google.maps.weather.CloudLayer(); 
     cloudLayer.setMap(map); 

     updateStatus(); 
     } 
    } 

    </script> 

Answer 1

目前的地圖，才能訪問裏面初始化，使其成爲全球訪問：

window.map = new google.maps.Map(/*.....*/); 

此外：的getBounds （）在地圖加載完成之前不能返回結果（因此，地圖異步加載你不能立即調用updateStatus（））。

您可能會發現tilesloaded事件：

google.maps.event.addListenerOnce(map,'tilesloaded',updateStatus); 

但事實看來，你也想觀察縮放和平移，你可以一次看到所有：

google.maps.event.addListener(map,'bounds_changed',updateStatus); 

Answer 2

的原因，你的沒有從getBounds()調用返回任何內容是因爲您的map變量不在全局範圍內。嘗試在你的函數外部聲明你的變量map，它應該可以工作 - 因爲你的聲明沒有什麼問題。

所以像...

var map; //declaring map variable globally 

function updateStatus() { 
//code.. 
} 

function onMapMove() { 
//code.. 
} 

function onMapZoom(oldZoom, newZoom) { 
//code.. 
} 

function load() { 

    //using the global variable 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
} 

Answer 3

• V3不包括GBrowserIsCompatible。
• 除非您知道自己在做什麼，否則不應在同一頁面上包含這兩個版本的API。

• 直到bounds_changed事件觸發，map.getBounds（）纔會返回有效值。您可能想要在bounds_changed的事件偵聽器中運行updateStatus函數。

  google.maps.event.addListener（map，'bounds_changed'，updateStatus}）;