如何使用require js shim加载google maps依赖项?

时间:2013-09-20 09:21:47

标签: javascript html requirejs

我必须加载一个JS文件

requirejs([
MyCode/mapview
    ],
    function   () {

});

现在这取决于谷歌地图 我也这样做

require( ["http://maps.google.com/maps/api/js?v=3.2&sensor=false"],
function() {
                var gm = document.createElement('script'); 
                gm.type = 'text/javascript'; gm.async = true;
                gm.src = document.location.protocol + "//maps.google.com/maps/api/js?v=3.2&sensor=false";
                var s = document.getElementsByTagName('script')[0]; 
                s.parentNode.insertBefore(gm, s);
            }
 );

就在我的reuqire js包含文件之前。我使用shim命令加载其他本地JS依赖项,但我很困惑如何将此依赖项(谷歌地图,http访问文件)分配给我的MyCode / mapview。

我应该如何在垫片中做到这一点?并在加载mapview.js之前运行该函数?

requirejs.config({
    shim: 
    {
        'MyCode/mapview': ['????'],         
    }
});

我知道依赖,因为我收到此错误,这是一个谷歌地图类型 未捕获的TypeError:无法读取未定义的属性“HYBRID”

1 个答案:

答案 0 :(得分:0)

这是一个可能有用的模块模式。

模块

var google_maps_loaded_def = null;

define(['jquery'],function($) {

  if(!google_maps_loaded_def) {

    google_maps_loaded_def = $.Deferred();

    window.google_maps_loaded = function() {
      google_maps_loaded_def.resolve(google.maps);    
    }

    require(['http://maps.googleapis.com/maps/api/js?sensor=true&callback=google_maps_loaded'],function(){},function(err) {
      google_maps_loaded_def.reject();
      //throw err; // maybe freak out a little?
    });

  }

  return google_maps_loaded_def.promise();

});

可作为要点: https://gist.github.com/MattSurabian/7868115

用法

使用上述模块并利用以下事实:使用google.maps解决了承诺:

    define([ 'app/lib/google-maps-loader' ], function(GoogleMapsLoader){
        GoogleMapsLoader.done(function(GoogleMaps){
            // your google maps code here!
            var geocoder = new GoogleMaps.Geocoder();
        }).fail(function(){ 
            console.error("ERROR: Google maps library failed to load");
        });
    });

或者,通常只引用google.maps对象

    define([ 'app/lib/google-maps-loader' ], function(GoogleMapsLoader){
        GoogleMapsLoader.done(function(){
            // your google maps code here!
            var geocoder = new google.maps.Geocoder();
        }).fail(function(){ 
            console.error("ERROR: Google maps library failed to load");
        });
    });

我写了一篇博客文章解释了这个问题以及为什么我更喜欢上面的方法与async插件相比,这可能是有用的:RequireJS Projects and Asynchronously Loading the Google Maps API