1

我目前有一个显示搜索结果的页面。当用户单击结果时，使用 ajax 获取详细信息并加载到页面中。在这些细节中，有一张谷歌地图。

以前，我在详细信息页面中有带有回调的 Gmaps 脚本。但是我遇到了这个问题，如果用户单击多个结果，则 Gmaps 脚本会被多次插入。

现在，我在结果页面中加载脚本，详细信息页面在传递所有必要参数的同时调用初始化函数。但我得到一个undefined is not a function错误。

所以我的问题是：如何构造 Gmaps 脚本、回调和异步初始化两个页面之间的映射（结果和详细信息）？

结果页面

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=[key]"></script>

function initialize(params) {
var directionsService, directionsDisplay, map;  

directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();

// your typical gmaps stuff

}

详情页面

<div id="map_canvas"></div>

initialize(params);
4

1 回答 1

2

您可以通过检查添加到 DOM 的“google”全局变量来查看 Google 地图的脚本是否已经加载。

完整的 jsfiddle 示例在这里：http://jsfiddle.net/gavinfoley/yD8Qt/。

    // dom ready
    $(function () {
        if (typeof google === "undefined") {
            alert("Lazy loading Google maps");
            lazyLoadGoogleMaps();
        } else {                
            alert("Google Maps is already loaded");
            googleMapsLoaded();
        }
    });

    function lazyLoadGoogleMaps() {
        // Note the callback function name 
        $.getScript("http://maps.google.com/maps/api/js?sensor=true&callback=googleMapsLoaded")
        .done(function (script, textStatus) {            
            alert("Google maps loaded successfully");
        })
        .fail(function (jqxhr, settings, ex) {
            alert("Could not load Google Maps: ", ex);
        });
    }

    // This function name is passed in to the Google maps script load above
    // and will be called once Google maps has loaded
    function googleMapsLoaded() {           
        alert("Done!");
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

于 2013-02-02T04:28:18.490 回答