Question

我正致力于使用此代码按需为我的网站加载谷歌地图：

  var googleMaps = document.createElement("script");
  googleMaps.type = "text/javascript";
  googleMaps.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&" +
  "callback=googlemapready";

问题在于，无论我做什么，回调都会以“window.googlemapready＆＃39;”的形式执行，有什么方法可以将其设置为不同对象的方法吗？这是没有污染全局命名空间，我知道我可以在函数中包含上面的代码并设置window.googlemapready = something ...

Answer 1

基本上回调必须是一个在全局范围内（谷歌运行回调的地方）可以访问的函数。

API使用eval来执行回调，因此过程如下：

//the global callback
function bar(){ alert('callback executed');}

//string provided as callback
callbackname='bar' ;

//execute it
eval('window.'+callbackname+'()') ;

当你看一下eval-part时，应该可以运行未定义为全局的函数，例如：作为对象的属性：

//a global object with a method
foo={bar:function(){ alert('callback executed too');}};

//string provided as callback
othercallbackname='foo.bar';

//execute it
eval('window.'+othercallbackname+'()');

......它的确有效（也有map-API）。

问题：你仍然需要一个全局的东西（在这种情况下foo）。

但这不是一个真正的问题，当你使用google-API时，至少会有一个你无法摆脱的全局对象：google

所以：将回调定义为全局google - 对象的属性。

如果您尚未加载API，可以询问如何设置Google的属性：在加载API之前自行定义：

window.google={bar:function(){/*do something*/}};

..然后使用以下内容加载API：callback=google.bar

示例实现（适用于多个调用）：

//create maps of elements with className map
document.addEventListener('click',function(e){
  var node=e.target,callback,script,execCallbacks;

  //check the class
  if(node.className==='map'){
     //assign a new class to prevent from further clicks 
     node.className='mapped';

     //when window.google isn't available, create it
    if(!window.google){
      window.google={}; 
    }

    //we will store the callbacks in an array  
    if(!window.google.callbacks){
      window.google.callbacks=[];
    }
    //function that executes the callbacks
    if(!window.google.execCallbacks){
      window.google.execCallbacks=function(){
        while(this.callbacks.length){
          this.callbacks.shift()();
        }
      };
    }

    //define the callback(creates a simple map) 
    callback=function(){
        new google.maps.Map(node,
                           {zoom:1,
                            center:new google.maps.LatLng(0,0)
                           });
    };

    //google.maps isn't loaded yet
    if(!window.google.maps){
       //push the callback to the callbacks
       window.google.callbacks.push(callback);
       //load the API
       script=document.createElement('script');
       script.src="https://maps.googleapis.com/maps/api/js?v=3&" +
                  "callback=google.execCallbacks";
       document.getElementsByTagName('script')[0].parentNode.appendChild(script);
     }
     //API is already loaded, run the callback directly
     else{
      callback();
     }

  }
});

演示：http://jsfiddle.net/doktormolle/gH8FR/

更改googlemap回调的此值

1 个答案: