Question

我知道有很多关于相同标题的问题，但遗憾的是我还没有找到合适的解决方案，因此我发布了另一个。

我正在尝试加载最简单的谷歌地图视图，并且在页面加载或表单提交后根本不加载。但是当我刷新页面时，它总是正确加载。

代码：

<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>

<div class="map-container">
    <div id="map" ></div>
</div>

<style type="text/css">
    .map-container{width: 100%;height: 400px;}
    #map{overflow: hidden;position: relative;width: 100%;height: 100%;}
</style>

<script type="text/javascript">
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        minZoom:1,
        center: new google.maps.LatLng(15, 0),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    /* I have already tried this code as well without success 
    google.maps.event.addDomListener(window, 'resize', function() {
        var center = map.getCenter();
        map.setCenter(center);
    });
    google.maps.event.trigger(map, "resize");
    */
</script>

当我检查控制台时，我没有看到任何错误，但是对于#no-api-keys有警告，因为我处于开发阶段，我并不在乎。

提交或页面加载后：

页面刷新后：

任何帮助都将受到高度赞赏。

提前致谢。

Answer 1

<scrip src="http://maps.google.com/maps?file=api&amp;v=2&amp;
    key=APKEY&sensor=false"
    type="text/javascript">
</script>

Answer 2

请确保您更改

<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>

到

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

并在<head> </head>之间的标头中添加您的脚本。我相信它可以解决你的问题。

Answer 3

加载脚本调用的页面时。在隐藏和显示脚本之后它将不会执行。像这样更改脚本

<script type="text/javascript">
    function loadMap(){
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 2,
            minZoom:1,
            center: new google.maps.LatLng(15, 0),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        });
    }
    /* I have already tried this code as well without success 
    google.maps.event.addDomListener(window, 'resize', function() {
        var center = map.getCenter();
        map.setCenter(center);
    });
    google.maps.event.trigger(map, "resize");
    */
</script>

在表单提交后调用loadMap（）函数。

页面提交后Google地图未加载

3 个答案: