本地主机的谷歌地图v3 api不起作用

我想尝试一个实现 Gmaps v3 的示例演示，并从 Google 的文档中尝试了此示例，但没有输出，页面只是加载几秒钟然后空白，没有输出。

<!DOCTYPE html>
<html lang = "en">
<head>
    <style type="text/css">
        html{height: 100%}
        body{height: 100%; margin: 0; padding: 0}
        #map-canvas{height: 100%}
    </style>
    <title>GMaps Demo</title>
    <script src = "https://maps.googleapis.com/maps/api/js?
                   key=${API_KEY}&sensor=false">
    </script>
    <script>
        function initialize(){
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = google.maps.Map(
                      document.getElementById("map-canvas"),
                      mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        </script>
</head>
<body>
    <div id = "map-canvas">
    </div>
</body>
</html>

~~首先：Google Maps 3不再需要api密钥，所以你可以使用~~

https://maps.googleapis.com/maps/api/js?sensor=false

作为网址。

（正如 Jeff Hoye 指出的那样，自 2016 年 6 月 22 日起，再次需要 API 密钥。

然后你忘记了这一行中的"新"：

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

通过这些更改，将显示您的地图。

现在没有 API 密钥，谷歌地图就无法正常工作......参考： https://console.cloud.google.com/apis

这

很容易！在新的 API 代码中，您应该输入您的引荐来源网址。因此，对于您的本地主机测试：

留空

这也是谷歌API的解释：

 Accept requests from these HTTP referrers (web sites) (Optional)
 Use asterisks for wildcards.

如果您将其留空，将接受来自任何推荐人的请求。
在生产中使用此密钥之前，请务必添加引荐来源网址。

相关内容

最新更新

热门标签：