0

我使用具有地图的加载方法显示页面。问题是页面已加载，但在地图 div 中显示灰色屏幕。当我刷新页面时，地图被加载。我也在文档就绪函数中调用地图函数。但没有用。

我的代码是

<div class="public-view" id="map_canvass">
<script type="text/javascript">
// OnLoad function ...
initialize();
function initialize() {
    var fenway = new google.maps.LatLng(<?php echo $propertyValues->lat; ?>, <?php echo $propertyValues->lng; ?>);
    var mapOptions = {
        center: fenway,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvass"), mapOptions);
    var circleOptions = {
        center: fenway,
        map: map,
        strokeColor: "#BB0A68",
        strokeOpacity: 0.1,
        fillColor: "#BB0A68",
        fillOpacity: 0.35,
        radius: 200
    }
    var circle = new google.maps.Circle(circleOptions);
    google.maps.event.trigger(map, 'resize');
}
</script>
</div>
4

1 回答 1

1

在您知道google.maps 已加载后，您需要调用 initialize() 。您上面的代码可能会在加载 google.maps 之前调用初始化。它在第二次刷新页面时工作，因为它已被缓存。jQuery 的文档就绪功能也不是 100% 可靠的。

Google Maps API 文档中的这个示例向您展示了最好的方法：

google.maps.event.addDomListener(window, 'load', initialize);
于 2012-07-12T04:53:53.073 回答