Google Maps API v3仅在页面刷新后加载 [英] Google Maps API v3 Loading Only After Page Refresh

问题描述

我正在为我正在处理的网页摆弄Google Maps API。我现在的问题是，地图加载完全按照我的意图进行，但只能在刷新页面后才加载。如果我不刷新页面，我所看到的只是画布。如果我离开页面并返回它，问题仍然存在，所以调用映射到 initialize 。

I'm fiddling around with the Google Maps API for a webpage I'm working on. My issue right now is, the map loads exactly as I intend it to but only after refreshing the page. If I do not refresh the page, all I see is the canvas. The problem remains if I leave the page and return to it so it appears to be an issue with calling for the map to initialize.

代码：

The code:

<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）; 所以我是认为这可能是问题所在。任何帮助表示赞赏。

Browsing through previous questions, I haven't found anything that matched my problem exactly but I've seen some similar situations that revolved around google.maps.event.addDomListener(window, 'load', initialize); so I'm thinking that might be where the issue is. Any help is appreciated.

编辑：指向正确的方向。在之后添加 $（document）.bind（projectLoadComplete，initialize）; google.maps.event.addDomListener（window，'load'，initialize ）; 修复了这个问题。问题在于使用导航时页面未完全加载。这个问题可能是货运集体平台所独有的。

Got pointed in the right direction. Adding $(document).bind("projectLoadComplete", initialize); after google.maps.event.addDomListener(window, 'load', initialize); fixes the issue. The issue was that the pages were not fully loading when using the navigation. This issue is probably exclusive to the Cargo Collective platform.

推荐答案

指出正确的方向。在之后添加 $（document）.bind（projectLoadComplete，initialize）; google.maps.event.addDomListener（window，'load'，initialize ）; 修复了这个问题。问题在于使用导航时页面没有完全重新加载。这个问题可能仅限于货运集体平台。我猜这是他们做出的让页面转换更快的决定。

Got pointed in the right direction. Adding $(document).bind("projectLoadComplete", initialize); after google.maps.event.addDomListener(window, 'load', initialize); fixes the issue. The issue was that the pages were not fully reloading when using the navigation. This issue is probably exclusive to the Cargo Collective platform. I am guessing it is a decision they made to make the page transitions faster.

这篇关于Google Maps API v3仅在页面刷新后加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！