本地主机的 Google Maps v3 api 不起作用 [英] Google Maps v3 api for localhost not working

查看：15
本文介绍了本地主机的 Google Maps v3 api 不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<html lang = "en"><头><style type="text/css">html{高度:100%}身体{高度:100%；边距:0；填充:0}#map-canvas{高度:100%}</风格><title>GMaps 演示</title><script src = "https://maps.googleapis.com/maps/api/js?密钥=${API_KEY}&sensor=false"><脚本>函数初始化(){var mapOptions = {中心:新的 google.maps.LatLng(-34.397, 150.644)，变焦:8，mapTypeId: google.maps.MapTypeId.ROADMAP};var 地图 = google.maps.Map(document.getElementById("map-canvas"),地图选项);}google.maps.event.addDomListener(window, 'load', initialize);<身体><div id = "地图画布">

解决方案

首先:Google Maps 3 不再需要 api 密钥，因此您可以使用

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

作为 URL.

(正如 Jeff Hoye 指出的，截至 2016 年 6 月 22 日，再次需要 API 密钥.)

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

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

通过这些更改，您的地图将显示出来.

I wanted to try out a sample demo of implementing Gmaps v3 and tried out this example from Google's documentation, but there is no output , the page just loads for a few seconds and then blank, no output.

<!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>

解决方案

First of all: Google Maps 3 does not need an api key anymore, so you are fine with

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

as an URL.

(As Jeff Hoye pointed out, as of June 22, 2016, an API Key is required again.)

And then you forgot the "new" in this line:

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

With those changes your map will be displayed.

这篇关于本地主机的 Google Maps v3 api 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆