2

我正在尝试学习如何使用 Google 地理编码 API，但我似乎无法让最简单的示例生成地图。我在 Google 上搜索了替代教程，但一切似乎都井井有条。

显然我一定错过了什么。这是我到目前为止所拥有的：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=thisstuffisprivate&sensor=false">
        </script>
        <script>
            var map;
            var mapOptions;
            function initialize() {
                try {
                    document.write("Initialize entered");
                    mapOptions = {
                        center: new google.maps.LatLng(-34.397, 150.644),
                        zoom: 8,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    document.write("<br>Map options created");
                    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                    document.write("<br>Initialize exited");
                } catch (err) {
                    document.write("<br>Error: " + err.message);
                }
            }
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width:500px;height:300px;">
        </div>
    </body>
</html>

这会产生一个空白页。请注意，我在我的计算机上使用此代码并使用 Firefox 检查结果。这尚未托管在外部服务器上。

谁能帮我弄清楚我犯了什么错误？这将使我能够继续学习如何使用这个 API！

非常感谢 ！

编辑： - 我做了一个小测试，在开头和结尾添加了写入，initialize()它似乎没有到达最后一行（在地图创建之后），所以它一定在某个地方失败了。将尝试对此进行调查。

  • 修改以考虑宽度和高度。感谢Leftium。

  • 经过进一步测试，它似乎在地图创建步骤上失败了。

  • 该代码在我的计算机上的 IE、Firefox 或 Chrome 上都不起作用，但似乎适用于其他用户。我使用的是 Windows 8 和所有浏览器的相对较新版本。Javascript 已启用，我已尝试关闭 Windows Defender（以防万一..）。仍然只是一个空白页。

  • 我也使用了 API 密钥，但它仍然会产生一个空白页面。

  • 对于上面的更新代码，我得到以下输出：

Initialize entered Map options created Error: a is null

  • 它还会在我的 Windows 7 笔记本电脑上生成一个空白页面，因此这不是与 Windows 8 的兼容性问题。
4

4 回答 4

1

您需要提供“map_canvas” <div> 尺寸：

<div id="map_canvas" style="width:500px;height:300px">
于 2013-01-12T17:54:08.733 回答
1

Google API 密钥由域名分配，而域名又通过HTTP_REFERER标头进行检查。当您在本地计算机上进行测试时，您的请求将与您为其注册密钥的实时域不匹配（他们会说localhost什么）。

  1. 您可以注册一个http://localhost密钥并在 localhost 测试期间使用它。
  2. 或者——你可以欺骗HTTP_REFERER它，让它看起来像是来自你的网站。我不知道 Google 许可协议是否允许这种欺骗。
于 2013-01-12T18:34:50.003 回答
1

通过进一步测试，我找到了确切的错误消息和另一个 SO 问题的解决方案。本质上，问题在于 div 实际上没有完全构建，并且 initialize() 调用在它进入 DOM 之前搜索这个元素（如果命名错误，请原谅我）。

解决方案是将调用移到创建 div 的下方。

Google MAP API 未捕获类型错误：无法读取 null 的属性“offsetWidth”

于 2013-01-13T01:29:40.037 回答
0

您可能需要获取 api 密钥。匿名用户可以提出的请求数量可能会受到限制，这可以解释为什么除了您之外的其他人都能够使用上面的示例加载地图。

您需要像这样更改脚本标签：

  <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
  </script>

加载地图 api

于 2013-01-12T18:15:08.030 回答