4

我正在为我正在处理的网页摆弄 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 平台独有的。

4

6 回答 6

5

经过几个小时不成功的解决方案搜索后，我终于找到了这个：

只需更换：

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

和：

$(document).ready(function(){
  initialize();
});
于 2016-10-29T17:53:23.237 回答
4

它在 Firefox 中对我来说似乎工作正常，但在 Internet Exploder 中却不行。在 IE 页面的第一个视图中，地图不会加载。我很确定这与页面的构建方式有关。当我在 IE 中查看源代码并搜索文本“map_canvas”（这当然是用于显示地图的 div 的 id）时，我无法在出于某种原因原始页面源，我实际上还没有弄清楚它是如何添加到页面中的。但是，div 确实在开发人员工具中显示为一个空的 xml 元素： <div id="map_canvas" /> 在随后刷新页面时它会被填充。这使我相信，无论您拥有的任何其他代码都必须将该 div 动态添加到页面，它在您的地图初始化脚本之后运行。所以，如果你有能力移动你的初始化地图脚本，那么最好的放置它的地方就是紧挨在结束 </body> 标记之前。如果它仍然不能正常工作，你可能想尝试延迟你的初始化脚本运行，甚至更多，尝试：

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);
    }
);
于 2013-10-29T08:44:42.420 回答
2

在 API 版本 3 中调用

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

或版本 2

map.checkResize()

确保在打电话google.maps.event.trigger(map, 'resize') 之前打电话map.fitBounds()，否则你会得到意想不到的结果。

于 2014-12-02T05:24:29.617 回答
2

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

于 2013-10-30T04:46:08.237 回答
1

我已经检查过了，它对我来说工作正常。请查看fiddle http://jsfiddle.net/aCx6L/

于 2013-10-29T06:27:55.653 回答
0

在尝试了各种建议并失败后，我发现以下内容对我有用：

try {google;} catch (e){location.reload();}

您应该在创建地图之前添加它。

我知道这可能不是最好的解决方案，因为它会在服务器上产生额外的负载。

我还发现地图可以在 Internet Explorer The Edge 中第一次正确加载，但不能在 Google Chrome 中正确加载。

于 2015-09-19T22:54:49.133 回答