Question

我正在尝试使用以下代码创建地图并加载.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文件加载的地图，而且我也不会将.kmz文件存储在localhost上，而是存储在我自己的服务器上。

如果有人能指出我的解决方案，我会很感激。

提前致谢。

Answer 1

你没有在任何地方调用initialize()，只是声明它。如果要在加载主体时调用它，请将其添加到正文onload中。

<body onload="initialize()">

你的结束体标签也是不完整的

</body>

和你的结束头标记

</head>

Answer 2

在您的HTML中，您正在使用：

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

并在你的CSS中：

#map-canvas {
    ...
}

问题：map-canvas≠map_canvas

由于地图需要显示高度，因此在您更正CSS之后，地图才会显示：

#map_canvas {
    ...
}

+ 您需要更正结束</head>和</body>代码。

+ 您需要调用initialize()函数。

将此添加到您的javascript：

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

Answer 3

在您的功能之后添加

`<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);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>`

Answer 4

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

谷歌地图 - 未加载地图

4 个答案: