5

我正在尝试在匿名函数中加载谷歌地图，但每当我尝试使用其中一种 api 方法时都会收到 javascript 错误。例如：

代码

var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
};

错误

TypeError: google.maps.LatLng is not a constructor

我创建了 2 个示例：

1）这通过页面正文中的脚本标签加载谷歌地图js。此方法确实有效，并且没有 js 错误。 http://jsfiddle.net/malonso/hgPQk/1/

2）这会在匿名函数中加载谷歌地图js。此方法不起作用，并且包含上面提到的 js 错误。http://jsfiddle.net/malonso/fZqqW/2/

我确信我遗漏了一些非常明显的东西，但我根本无法弄清楚是什么。提前致谢。

更新：我应该指出，谷歌地图需要从匿名函数中加载。

4

2 回答 2

9

你可以这样做。您可以在 url 中添加回调函数名称。加载 API 时将调用它。该回调函数必须在文档范围内可访问。

我前段时间通过使用 jQuery 在窗口上触发自定义事件来做到这一点：http: //jsfiddle.net/fZqqW/5/

使用“ http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback ”

window.gMapsCallback = function(){
    $(window).trigger('gMapsLoaded');
}

$(document).ready((function(){
    function initialize(){
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
    }
    function loadGoogleMaps(){
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    }
    $(window).bind('gMapsLoaded', initialize);
    loadGoogleMaps();
})());​

异步加载 API

您可能希望在页面完成加载后或按需加载 Maps API JavaScript 代码。为此，您可以注入自己的代码以响应 window.onload 事件或函数调用，但您需要额外指示 Maps JavaScript API 引导程序延迟应用程序代码的执行，直到 Maps JavaScript API 代码完全加载. 您可以使用回调参数来执行此操作，该参数将在完成加载 API 时执行的函数作为参数。

以下代码指示应用程序在页面完全加载后（使用 window.onload）加载 Maps API，并将 Maps JavaScript API 写入页面内的标记中。此外，我们通过将 callback=initialize 传递给 Maps 来指示 API 仅在 API 完全加载后执行 initialize() 函数

见这里：https ://developers.google.com/maps/documentation/javascript/tutorial

于 2012-09-26T12:51:58.283 回答
0

从返回的 JavaScript

http://maps.google.com/maps/api/js?sensor=false

包括调用document.write(). 如果在加载 DOM 之后发生这种情况，事情将无法正常工作。我认为您不能期望以这种方式异步加载 Google 地图代码。

于 2012-09-26T12:50:58.590 回答