13

我在使用 html 和 javascript 的移动应用程序中使用谷歌地图。当我加载地图时，我只能在左上角看到 5% 的地图。95% 的 div 容器是灰色的。当我想用 Firebug 检查 div 时，整个地图会突然加载。那会是什么？我已经尝试了几个 Stackoverflow 线程，但没有适合我的解决方案。谢谢你。

代码：

<link type="text/css" rel="stylesheet" href="jquery.mobile...>
<link type="text/css" rel="stylesheet" href="index.css">
<script type="text/javascript" src="jquery.mobile...></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile...></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js">       </script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="index.js"></script>

<div id="map" style="width: 700px; height: 700px;"></div>

var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 10,
       center: new google.maps.LatLng(-33.92, 151.25),
       mapTypeId: google.maps.MapTypeId.ROADMAP                                
});

index.js

$(document).ready(function() {
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
});

当我使用以 % 或 em 衡量的 div 属性时，它根本不起作用。

4

7 回答 7

21

检查您的 mapOptions 其中心或其他属性是否正确。在我的场合，谷歌地图无法解释中心属性；尽管该页面在 css 和 jsp 方面完全没有错误，但它一直向我显示灰色地图。

于 2015-06-24T14:45:28.390 回答
20

尝试在文档就绪时调用 resize 方法：

$(document).ready(function() {
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
    google.maps.event.trigger(map, 'resize');
});
于 2012-11-23T09:18:05.030 回答
4

在我的情况下，我的地图没有加载，因为我没有设置zoom选项。

var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 10, // Forgot to set this prop
       center: new google.maps.LatLng(-33.92, 151.25)                               
});
于 2018-12-17T10:45:05.780 回答
0

就我而言，只需致电即可map.refresh()解决此问题。我正在使用 Gmaps。

于 2016-10-05T18:14:32.153 回答
0

这发生在我身上，因为 mapTypeId 为 NULL。

尝试：

map.setMapTypeId("roadmap");
于 2017-09-10T17:07:38.617 回答
0

就我而言，我错过了提供来自外部 API 的经度。一旦 API 被修复为包含经度，问题就解决了。

于 2017-11-17T00:50:35.403 回答
0

我有一个使用angular 5的类似问题
我只能通过使用setTimeout AND a来刷新/重新创建地图setZoom（即使级别相同）

// set timeout.
setTimeout(() => {
    console.log("attempting refresh");
    google.maps.event.trigger(this.map, "resize");
    this.map.setZoom(8);
},
100);

在这里工作

刷新的迷人之处在于它会在第二次显示时移动地图。谷歌地图显然不是没有错误的。

于 2018-02-21T05:04:40.360 回答