Question

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

我的代码是

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

Answer 1

您需要在知道加载google.maps后调用initialize（）。您的代码可能会在加载google.maps之前调用initialize。它第二次页面刷新，因为它已被缓存。 jQuery的文档就绪功能也不是100％可靠。

来自Google Maps API文档的

This example向您展示了执行此操作的最佳方式：

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

显示没有页面刷新的地图。

1 个答案: