gpt4 book ai didi

javascript - 谷歌地图 - map 未加载

转载 作者:行者123 更新时间:2023-11-30 06:53:08 27 4
gpt4 key购买 nike

我正在尝试使用以下代码创建 map 并加载 .kmz 文件:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8">
<style type ="text/css"> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px}</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=mykey"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(58.33, -98.52),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var kmzLayer = new google.maps.KmlLayer('link_to_kmz_file');
kmzLayer.setMap(map);
}
</script>

</head
<body>
<div id="map_canvas"> </div>
</body
</html>

当没有加载任何东西时就会出现问题,我不知道为什么会这样。我应该提到我的 API_KEY 是有效的,因为我用它来创建另一个不需要加载 .kmz 文件的 map ,而且我也没有将 .kmz 文件存储在本地主机上,而是存储在我自己的服务器上。

如果有人能指出解决方案,我将不胜感激。

提前致谢。

最佳答案

在您的 HTML 中,您正在使用:

<div id="map_canvas"></div>

在你的 CSS 中:

#map-canvas {
...
}

问题:map-canvasmap_canvas

由于 map 需要显示高度,您的 map 将不会显示,直到您像下面这样更正您的 CSS:

#map_canvas {
...
}

+ 您需要更正您的关闭</head></body>标签。


+ 您需要调用 initialize()功能。

将此添加到您的 javascript 中:

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

关于javascript - 谷歌地图 - map 未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28627831/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com