Question

我从谷歌地图文档中复制了以下javascript代码，但它不起作用，它只显示一个白色的空白页面，没有任何加载。

<!DOCTYPE html>
  <html>
 <head>
   <title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="UTF-8">

<!--
Include the maps javascript with sensor=true because this code is using a
sensor (a GPS locator) to determine the user's location.
See: http://code.google.com/apis/maps/documentation/javascript/basics.html#SpecifyingSensor
-->
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

<script type="text/javascript">
  var map;

  function initialize() {
    var myOptions = {
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);

    // Try HTML5 geolocation
    if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);

        var infowindow = new google.maps.InfoWindow({
          map: map,
          position: pos,
          content: 'Location found using HTML5.'
        });

        map.setCenter(pos);
      }, function() {
        handleNoGeolocation(true);
      });
    } else {
      // Browser doesn't support Geolocation
      handleNoGeolocation(false);
    }
  }


  function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
      var content = 'Error: The Geolocation service failed.';
    } else {
      var content = 'Error: Your browser doesn\'t support geolocation.';
       }

         var options = {
         map: map,
         position: new google.maps.LatLng(60, 105),
         content: content
       };

       var infowindow = new google.maps.InfoWindow(options);
       map.setCenter(options.position);
     }

     google.maps.event.addDomListener(window, 'load', initialize);
   </script>
 </head>
 <body>
   <div id="map_canvas"></div>
 </body>
  </html>

由于v3需要api密钥它有什么问题？我检查了谷歌浏览器和Firefox，但没有任何线索。

Answer 1

看起来你错过了一个结束html标签，除非这是一个错字。

在页面底部添加此</html>。

Answer 2

您需要提供center位置来创建map。在initialize()功能中，更改地图选项以包含您要开始的位置：

var myCenter = new google.maps.LatLng(60.0,105.0);
var myOptions = {
  zoom: 6,
  center: myCenter, 
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

当您（或如果）从地理定位服务获得位置时，您的代码将更改中心。

Answer 3

老问题，无论如何都会回答以防其他人降落在这里。

我最终使用了稍微不同的实现来实现这一点：

<script type="text/javascript">
  function initialize() {
    var mapOptions = {zoom: 8, center: new google.maps.LatLng(-34.397, 150.644)};
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
                                  mapOptions);
  }

  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp'+
                 '&key={{API_KEY}}&sensor=false&callback=initialize';
    document.body.appendChild(script);
  }

  window.onload = loadScript();
</script>

我必须添加以使其从其他（几乎相同）版本开始工作的部分是loadScript（）末尾的（）。隐式函数调用根本就没有发生。

您需要将{{API_KEY}}替换为您自己的{}。我不确定这是否是必需的，但它是导致我实现工作的一部分。

如果您没有，请按照列出的here

步骤进行操作

Google Map V3 API无法在localhost中运行

3 个答案: