在异步加载谷歌地图V3时将数据传递给回调 [英] Pass data to callback when asynchronously loading google maps V3

问题描述

我异步加载Google地图API ，允许您定义要执行的回调当API加载时。有什么办法可以传递参数给回调吗？

编辑：

这是我正在使用的代码。我有一个名为 master 的全局对象，用于存储以下函数。

  / ** 
 *加载Google Maps API 
 * https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API 
 * / 
 loadGoogleMaps：function（ ）{
 var googleMaps = document.createElement（script）; 
 googleMaps.type =text / javascript; 
 googleMaps.src =http://maps.googleapis.com/maps/api/js?key=[MYAPIKEY]&sensor=false&callback=master.mapInit; 
 document.body.appendChild（googleMaps）; 
} 
  

我希望能够将一个位置数组传递给 mapInit ，所以我可以在初始化时向地图添加标记。我还希望能够全局访问对地图的引用，以便在地图创建后修改地图。

  / ** 
 *初始化地图
 * / 
 mapInit：function（）{
 
 //默认地图选项
 var mapOptions = {
 zoom：4，
 center：new google.maps.LatLng（40，-95），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 
 //创建地图
 var map = new google.maps.Map（document.getElementById（map），mapOptions）; 
 
} 
  

解决方案

在$ master 对象中创建一个对象以保存有关特定地图的信息。每个地图都有自己的回调定义。它还包含对初始化映射的引用以及需要由回调引用的任何其他地图特定数据。

  / * * 
 *地图列表
 * / 
 mapList：{
 mainMap：{
 map：，
 callback：function（）{
 
 for（var i = 0，length = this.locations.length; i  
 master.placeMapMarker（this.locations [i]，this）; 
 
 
 $ b $ 
 prevInfoWindow：，
 locations：{} 
} 
} 
  

我修改了 mapInit 函数来存储对地图的引用并在 master.mapList.mainMap 中执行回调。

  / * * 
 *初始化地图
 * / 
 mapInit：function（）{
 
 
 //默认地图选项
 var mapOptions = { 
 zoom：4，
 center：new google.maps.LatLng（40，-95），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 
 //创建地图
 var mapName = $（＃map）。data（name）; 
 var map = this.mapList [mapName] .map = new google.maps.Map（document.getElementById（map），mapOptions）; 
 
 this.mapList [mapName] .callback（）; 
 
 $ b} 
  

我将地图名称存储在<

 < / code>< code> data-name  div id =mapdata-name =mainMap>< / div> 
  

I am loading the google maps API asynchronously which allows you to define a callback to execute when the API loads. Is there any way I can pass arguments to the callback?

EDIT:

Here's the code I'm working with. I have a global object called master storing the following functions.

/**
 * Load the Google Maps API
 * https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
 */
loadGoogleMaps: function(){
    var googleMaps = document.createElement("script");
    googleMaps.type = "text/javascript";
    googleMaps.src = "http://maps.googleapis.com/maps/api/js?key=[MYAPIKEY]&sensor=false&callback=master.mapInit";
    document.body.appendChild(googleMaps);
}

I want to be able to pass an array of locations into mapInit so I can add markers to the map when it gets initialized. I'd also like to be able to globally access the reference to the map so I can modify the map after its creation.

/**
 * Initialize the map
 */
mapInit: function(){

    // Default map options
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng( 40, -95 ),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    // Create map
    var map = new google.maps.Map( document.getElementById("map"), mapOptions );

}

解决方案

I ended up working around the need to pass arguments to the callback.

I created an object inside my master object to hold information about a specific map. Each map has its own callback defined. It also holds the reference to the initialized map and any additional map specific data that needs to be referenced by the callback.

/**
 * Map listing
 */
mapList: {
    mainMap: {
        map: "",
        callback: function(){

            for( var i = 0, length = this.locations.length; i < length; i++ ){

                master.placeMapMarker( this.locations[i], this );

            }

        },
        prevInfoWindow: "",
        locations: {}
    }
}

I modified the mapInit function to store the reference to the map and execute the callback in master.mapList.mainMap.

/**
 * Initialize the map
 */
mapInit: function(){


    // Default map options
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng( 40, -95 ),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    // Create map
    var mapName = $("#map").data("name");
    var map = this.mapList[mapName].map = new google.maps.Map( document.getElementById("map"), mapOptions );

    this.mapList[mapName].callback();


}

I stored the map name in a data-name attribute on the placeholder element for the map.

<div id="map" data-name="mainMap"></div>

这篇关于在异步加载谷歌地图V3时将数据传递给回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！