Question

我目前正在尝试使用require.js模块定义和依赖关系处理程序加载Google Maps库及其扩展名RichMarker。

我已经宣布了Google地图模块和扩展程序的路径，如下所示：

"gmaps": "modules/google_maps",
"richmarker": "vendor/google/maps/richmarker.min"

google_maps模块看起来像

define('gmaps', ['async!http://maps.googleapis.com/maps/api/js?key=mykey&sensor=true'],
function(){
  return window.google.maps;
});

最后，该模块使用了google maps Library和advancedMarker扩展，定义如下：

define(['common', 'gmaps','jquery','jqueryui',  'bootstrap',"vendor/google/maps/clusterer.min", "tmp/clusteringData", "richmarker"],
function(common, gmaps){

然而，谷歌地图正确进入onload，但我在控制台中收到有关richmarker扩展程序的错误：

Uncaught ReferenceError: google is not defined richmarker.min.js:1
Uncaught ReferenceError: RichMarker is not defined google.init.js:267

我在哪里做错了？谢谢你的帮助。

Answer 1

infobox.js的问题严重依赖于谷歌地图。

我做了什么：

我已定义模块google（而不是gmaps），它返回整个google对象（而不是单个maps属性）

define('google', ['async!http://maps.googleapis.com/maps/api/js?key=mykey&sensor=true'],
  function() {
    return window.google;
  });

我在RequireJS配置文件中定义了infobox和google之间的依赖关系：

paths: {
  google: 'ref/google',
  infobox: 'ref/infobox'
},
shim: {
  infobox: {
    deps: ['google']
  }
}

Answer 2

我不久前回答了同样的问题：

https://stackoverflow.com/a/13955963/1916258

我认为你需要“填充”谷歌对象。

require.config({
   baseUrl: 'js',
   paths: {
      gmaps: 'path/to/gmaps'
   },
   shim: {
      gmaps: {
         exports: 'google'
      }
   }
});

Require.js会同时加载Google地图及其Richmarker扩展程序

2 个答案: