javascript - Google Maps API v3 - 隐藏 Div - map 未以 div 为中心

Question

我已经查看了几个类似的问题，但仍然没有找到解决方案。

我有这个页面:http://www.citizensmemorial.com/Test2014/locations/cmh-infectious-disease-and-internal-medicine-clinic/index.html

我正在使用此代码:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBs_4MZDYZTCtkoB-Hbo4qQyWy-qHQuEdA"></script>
<script>
var mapExists = document.getElementById('map-canvas'); if(mapExists) 
var map;
function initialize() {
var myLatLng = new google.maps.LatLng (37.625387, -93.424350)
  var mapOptions = {    
    zoom: 12,
    center: myLatLng
  };   
 map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
       var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'CMH Infectious Disease & Internal Medicine Clinic'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>

这是适用的 CSS:

html, body, #map-canvas {
    width:100%;
    height:100%
}
#map_canvas {
position: relative;
}
.map-holder {
width:500px;
    height:270px;
    padding: 0px;
    display:table; 
    margin-top:3px; 
    float:right;
}

我假设它与 css 相关，导致 map 无法居中，因为我已经在这个 url 上测试了 map 代码并且它正在工作: http://www.citizensmemorial.com/Temp/mapTest.html

Answer 1

看起来您正在初始化 map ，然后 map Canvas div 可见。您需要触发调整大小，否则 map 将不知道其正确的大小。

初始化 map 后调用 map 调整大小

google.maps.event.trigger(map, "resize");

然后将 map 中心设置为您的标记。

map.setCenter(markerlatlng);