谷歌地图刷新灰色

Posted 2023-02-23

【中文标题】谷歌地图刷新灰色

【英文标题】：google maps refreshing grey

【发布时间】：2012-12-25 11:23:30

【问题描述】：

我正在尝试将 Google Map 添加到 jquery.mobile 站点 javascript 和 Google Maps API。问题是每次我加载地图时，大部分地图都是灰色的。我做了一些研究，显然我必须添加命令：

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

但过去几个小时我一直在摆弄这个，我似乎无法让它工作。这是我正在使用的代码：

var myLatlng = 新 google.maps.LatLng(34.310774,66.225586); var mapOptions = 中心：myLatlng， mapTypeId：google.maps.MapTypeId.ROADMAP var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); // 边界 var southWest = 新 google.maps.LatLng(31.207164,61.347656); var northEast = new google.maps.LatLng(37.617713,69.785156); var bounds = new google.maps.LatLngBounds(southWest,northEast); map.fitBounds(边界); google.maps.event.trigger(map, 'resize');

【问题讨论】：

***.com/questions/13484651/…的可能重复

【参考方案1】：

要解决这个问题，您需要：

确保显示地图的 div 具有有效的大小，如果它被隐藏，它将具有零大小，您需要先显示 div 才能使其具有有效的大小。如果使用百分比调整大小，请确保其所有父元素都具有百分比大小或特定大小（请参阅Mike Williams' Google Maps API v2 tutorial on the subject for details）。

一旦它有一个大小初始化地图（如果你还没有）

如果它已经被初始化，就触发它的resize事件。

触发resize事件后可能需要设置地图的中心。

你没有提供足够的信息来判断你哪里出错了。

【讨论】：

我不确定我可以添加哪些其他信息。我已经将大小硬编码到 div 标签 中，并且我在 html 的开头调用该函数。我很乐意提供更多信息。

CSS。 html。页面的其余部分。代码是否在 onload 函数中运行？如果不是，那就是问题（在页面完成渲染并触发 onload 事件之前，div 没有大小）。

代码从 函数运行。除了此处列出的内联 CSS 之外，我在地图的 DIV 上没有其他 CSS。 HTML 的其余部分此时只是一个基本的 jquery.mobile 页面（因为我遇到了问题，所以我创建了一个外部页面，上面除了地图之外什么都没有）。如果你想看源代码，我想我可以把网站放到网上。

把它放到网上（链接或 jsfiddle）会很有帮助。如果没有所有部分，这些问题很难解决。

您可以将需要更改的代码添加到您的问题中吗？或者更新我的答案以包含它？这是一个很常见的问题，一个完整的解决方案将对将来的某人有用。

【参考方案2】：

在开始编码之前，您应该首先让 Google Map Widget 工作。您只需要密钥 ID、纬度和经度并使用应用程序设计器。默认情况下建议的缩放设置为 8 就足够了。 以下是一些细节： http://hodentekmobile.blogspot.com/2016/07/intel-xdk-controls-6-using-google-map.html