Question

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

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

现在，我在结果页面中加载脚本，详细信息页面调用initialize函数，同时传递所有必需的参数。但是我收到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);

Answer 1

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

Full jsfiddle example here: 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>

异步显示多个Google地图

1 个答案: