Question

我正在编写一个应用程序，使用手工构建的框架异步加载Google地图当我加载地图时，由于某些原因它不会加载所有内容，我最终会得到Uncaught TypeError: undefined is not a function。我检查了chrome检查器，发现google.maps是一个有效的对象，但它没有自己的属性。在文档加载后我手动调用“初始化函数”。我做错了什么？！

Answer 1

您无法使用众所周知的网址（http://maps.googleapis.com/maps/api/js?v=3&sensor=false）

异步加载maps-API

当你看一下脚本文件时，你会发现，这不是加载的API，它是一个加载API的加载器。加载器使用document.write()，在文档加载后调用时会导致意外结果。

此外，文档的onload-event不等待异步加载的对象，它可能会太快。

你也不能使用脚本的load-event来调用initialize-function，因为当它触发时，加载了加载器，而不是maps-API。

怎么做：
将一个callback-parameter附加到script-URL（初始化函数的名称为值）

http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize

现在你得到一个不同的装载机：

不使用document.write()
在加载maps-API时调用callback-function（initialize）

演示：http://jsfiddle.net/doktormolle/7cu2F/

与评论相关：似乎回调必须是直接附加到窗口的函数。不酷的谷歌：）

还有另一个选项the google-API-loader支持使用函数引用（而不是函数名）。

Sample，它以异步方式加载maps-API，但仅当文档中有一个ID为map-canvas的元素时，才会创建一个map：

    window.addEventListener('load',function(){
      if(document.getElementById('map-canvas')){
        google.load("maps", "3",{
          callback:function(){
             new google.maps.Map(document.getElementById('map-canvas'), {
                center: new google.maps.LatLng(0,0),
                zoom: 3
              });
          }
        });     
      }
    },false);

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

<script src="https://www.google.com/jsapi?.js"></script>
<div id="map-canvas"></div>

Async Google Maps API v3 undefined不是一个功能

1 个答案: