Question

所以我正在研究“入门”指南中提到的第一个例子。它告诉我键入以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

我输入了API密钥并将传感器变量设置为false。此外，我将我的IP地址添加到“服务器应用程序密钥”。但是，当我尝试查看页面时（通过使用谷歌浏览器打开html文件），它会给我一个简短的地图闪现，然后给我一个弹出窗口说：

Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v3 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: https://developers.google.com/maps/documentation/javascript/tutorial#api_key

我尝试查看其他几个关于此问题的StackOverflow问题，但它们似乎都没有帮助......

Answer 1

离开API密钥。这不是开发目的所必需的。因为您正在尝试开发谷歌地图应用程序。使用以下代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new 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>

希望，它可以帮助您开发谷歌地图应用程序。

查看API access limitation and billing details。并且还要记住获取api key。

Answer 2

这个示例工作正常，您可以从api链接中删除密钥，因为v3库不再需要它。因此，标题中的API链接将为

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">

如何在浏览器中查看在本地使用Google Maps API v3的HTML页面

2 个答案: