地圖API V3：map.setCenter不能正常工作

Question

我有地圖API V3

首先這裏setCenter問題是我的代碼：

function initialize() { 
    var myLatlng = new google.maps.LatLng(<?= $product["latitude"] ?>,<?= $product["longitude"] ?>); 
    var center = myLatlng; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 11, 
     center: myLatlng 
    }); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map 
    }); 

    google.maps.event.addDomListener(map, 'idle', function() { 
     center = map.getCenter(); 
    }); 
    google.maps.event.addDomListener(window, 'resize', function() { 
     map.setCenter(center); 
    });   
} 


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

然後我的問題：

• 當我把我的窗口從全屏小：它的工作原理（事件 觸發兩次，不知道爲什麼）
• 當我做了我的窗前再次全屏：這是行不通的
• 當我把我的窗口更小或更大：它什麼都不做，以及

地圖的其餘部分工作得很好，我真的不明白這一點。

Answer 1

這是不正確的：

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

運行立即初始化，並使用它的返回值作爲一種功能，當窗口加載事件中運行執行。

這也是不正確：

google.maps.event.addDomListener(map, 'idle', function() { 
    center = map.getCenter(); 
}); 

map不是一個DOM元素，這應該是google.maps.event.addListener。

你的問題，是因爲你are't觸發map resize事件時，地圖的DOM元素改變大小。

google.maps.event.addDomListener(window, 'resize', function() { 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(center); 
}); 

proof of concept fiddle

代碼片段：

function initialize() { 
 
    var myLatlng = new google.maps.LatLng(40.7127837, -74.0059413); 
 
    var center = myLatlng; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 11, 
 
    center: myLatlng 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: myLatlng, 
 
    map: map 
 
    }); 
 

 
    google.maps.event.addListener(map, 'idle', function() { 
 
    center = map.getCenter(); 
 
    }); 
 
    google.maps.event.addDomListener(window, 'resize', function() { 
 
    google.maps.event.trigger(map, 'resize'); 
 
    map.setCenter(center); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>