Question

我正在尝试将Google Maps v3异步地图实施到我的网站中，并使其与如何实现几乎相同。虽然页面上没有加载地图！有谁在这看错了什么？

<script type="text/javascript">

google.maps.visualRefresh = true;

function initialize() {
  var mapOptions = {
    zoom: 18,
    center: new google.maps.LatLng(42.7870,-86.1023),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  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?sensor=false' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

</script>

和

<div id="map-canvas"></div>

此页面的CSS非常简单：

html, body, #map-canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}

有什么想法吗？

Answer 1

有两个问题。

移动此行

google.maps.visualRefresh = true;

到initialize的开头。当您异步加载API时，在执行此行时<{1>}仍未定义（您的调试器本应告诉您），此错误将阻止执行所有后续指令
google

在script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false' + 'callback=initialize';

Answer 2

Sometines最好直接去源，不要使用google：）

哟可以查看他们正在使用和学习的源代码。之后你可以google。

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

在此示例中，他们使用google地图库的同步加载。

您可以加载asyncronous然后使用这种方式：

·首先添加div和初始化函数：

<div id="map" style="width: 100%; height: 480px;"></div>
<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            zoom: 18,
            center: new google.maps.LatLng(42.7870,-86.1023),
            mapTypeId: google.maps.MapTypeId.SATELLITE
        };

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

注意：您不需要使用google.maps.visualRefresh = true;谷歌在这里说： https://developers.google.com/maps/documentation/javascript/basics

·第二个脚本用于异步加载和头部或在标记的en之前的最后一行之前。这样可以快速加载页面。

<script type="text/javascript"> 
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>

异步映射没有加载？

2 个答案: