Question

我正在为我正在处理的网页摆弄Google Maps API。我现在的问题是，地图完全按照我的意图加载，但仅在刷新页面后才加载。如果我不刷新页面，我看到的只是画布。如果我离开页面并返回该页面，问题仍然存在，因此将地图调用initialize似乎是一个问题。

代码：

<style>
    #map_canvas {
    width: 670px;
    height: 400px;
    background-color: #CCC;
    }
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
    function initialize() {

        var myLatLng = new google.maps.LatLng(31.247681, 121.449504);

        var map_canvas = document.getElementById('map_canvas');

        var map_options = {
        center: new google.maps.LatLng(31.248195, 121.447431),
        zoom: 16,
                mapTypeControl: false,
                panControl: false,
        zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
        },
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(map_canvas, map_options);

        var contentString =
            '<b>Leung Gallery</b>' +
            '<p>50 Moganshan Rd. Building 7, Unit 108, Shanghai</p>' +
            '<p>&#19978;&#28023;&#26222;&#38464;&#21306;&#33707;&#24178;&#23665;&#36335;50&#21495;7&#21495;&#27004;108&#23460;</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

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

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

        google.maps.event.addListener(marker, 'click', function(){
            infowindow.open(map,marker);
        });

    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

浏览以前的问题，我没有发现任何与我的问题完全相符的内容，但我看到一些围绕google.maps.event.addDomListener(window, 'load', initialize);的类似情况，所以我认为这可能是问题所在。任何帮助表示赞赏。

编辑：指向了正确的方向。在$(document).bind("projectLoadComplete", initialize);之后添加google.maps.event.addDomListener(window, 'load', initialize);可以解决问题。问题是使用导航时页面没有完全加载。这个问题可能是Cargo Collective平台独有的。

Answer 1

在Firefox中似乎对我有用，但在Internet Exploder中却没有。在IE中，地图未加载的页面的第一个视图。我很确定它与页面构建方式有关。当我在IE中查看源代码并搜索文本“map_canvas”（当然是你要显示的地图的div的id）时，我无法找到div或任何带有该id的html元素。原始页面源由于某种原因，我实际上没有弄清楚它是如何被添加到页面中的。但是，div确实在Developer Tools中显示为一个空的xml元素：＆lt; div id =“map_canvas”/＆gt;在随后刷新页面时，它会被填写。这使我相信，无论你有什么其他代码必须将div动态添加到页面，它都会在你的地图初始化脚本之后运行。因此，如果您能够移动初始化地图脚本，那么放置它的最佳位置就是在结束之前＆lt; / body＆gt;标签。如果它仍然无法正常工作，您可能想尝试延迟初始化脚本甚至运行更多，尝试：

google.maps.event.addDomListener(
    window,
    'load',
    function () {
         //1000 milliseconds == 1 second,
         //play with this til find a happy minimum delay amount
        window.setTimeout(initialize, 1000);
    }
);

Answer 2

经过几个小时寻找解决方案失败后，终于找到了这个：

只需替换：

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

使用：

$(document).ready(function(){
  initialize();
});

Answer 3

指向正确的方向。在$(document).bind("projectLoadComplete", initialize);之后添加google.maps.event.addDomListener(window, 'load', initialize);可以解决问题。问题是使用导航时页面没有完全重新加载。这个问题可能是Cargo Collective平台独有的。我猜这是他们为使页面转换更快而做出的决定。

Answer 4

在API版本3中调用

google.maps.event.trigger(map, 'resize')

或版本2

map.checkResize()

确保在致电google.maps.event.trigger(map, 'resize')之前致电map.fitBounds() ，否则您将获得意外结果。

Answer 5

我检查了这个，它对我来说很好。请结帐fiddle http://jsfiddle.net/aCx6L/

Google Maps API v3仅在页面刷新后加载

5 个答案: