谷歌地图API不显示(固定高度/宽度无法解决)



显示地图以前可以工作,但由于某种原因,我真的无法确定它停止工作。

这是我的 html 包含:

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=THIS_KEY_IS_CORRECT">
</script>

这是我的 html:

(with style tags)
#map { height: 500px; }
<div id="map" > </div> 

还有我的JavaScript

setTimeout(() => {
console.log("Running init map");
var map_div = document.getElementById("map");
var map_handler = new google.maps.Map(map_div, map_options);
console.log(map_handler);
},2000);

以下是map_handler的控制台日志:

ug {__gm: Yf, W: undefined, mapTypes: Object, features: Object, overlayMapTypes: _.td…}

所以map_handler实际上是在返回一些东西。

正如我所说,这曾经有效。由于某种原因,它不再了。

知道为什么吗?

谢谢。

虽然这不是问题的主要来源 - 请注意,您不能依靠setTimeout来告诉您何时加载了谷歌地图 JS API。使用回调:

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=THIS_KEY_IS_CORRECT&callback=myMapIsReady">
</script>

然后

<script>
var myMapIsReady = function() {
console.log("Running init map");
var map_div = document.getElementById("map");
var map_handler = new google.maps.Map(map_div, map_options);
console.log(map_handler);  
};
</script>

问题是,你为什么说这不起作用?怎么不行?您在屏幕上看到了什么?

提示可能是您尚未显示其定义位置map_options,如果您初始化没有中心latlng/zoom的Google地图,则只会看到一个灰色块。

相关内容

  • 没有找到相关文章

最新更新