0

我想使用 v3 api 嵌入谷歌地图：

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="map"></div>
    <script src="http://maps.googleapis.com/maps/api/js?v=3&key=mykey&sensor=false&region=DE"></script>
    <script>
      new google.maps.Map(document.querySelector('div.map'), {
        zoom: 4, center: new google.maps.LatLng(0, 0)
      });
    </script>
  </body>
</html>

结果是它成功加载了所有 ajax 并将它们呈现到div.map但地图是米色/灰色并且缺少控件。

笔记：

  • key=mykey是我的 api 密钥的占位符
  • document.querySelector返回匹配的元素节点并在我的浏览器上工作
  • 允许省略地图类型，因为ROADMAP是默认值
  • 您不必将逻辑放入加载事件包装器中，因为它位于文档的末尾

所以请不要建议任何上述内容 - 我已经尝试过了！

那么我做错了什么？

博多

4

2 回答 2

1

每个文档都需要mapTypeId

mapTypeId MapTypeId 初始地图mapTypeId。必需的。

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="map" style="height:500px; wiodth:600px;"></div>
    <script src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&region=DE"></script>
    <script>
      new google.maps.Map(document.querySelector('div.map'), {
        zoom: 4, center: new google.maps.LatLng(0, 0), mapTypeId: google.maps.MapTypeId.ROADMAP
      });
    </script>
  </body>
</html>

工作示例

于 2013-06-13T16:16:31.333 回答
0

根据Google 的示例，添加一些 CSS 以使地图以特定大小显示：

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  .map { height: 100% }
</style>

尝试将地图分配给一个变量：

var map = new google.maps.Map(...)
于 2013-06-13T15:06:04.993 回答