Google maps api 3 如何使用RequireJS加载Google地图API？

我正在努力用requireJS加载gmapsapi。这就是我尝试过的：

requirejs.config({
    urlArgs: "noCache=" + (new Date).getTime(),
    paths : {
        "jquery": "vendor/jquery-1.8.2.min",
        "bootstrap": "vendor/bootstrap.min",      
        "underscore": "libs/underscore-min",
        "backbone": "libs/backbone-min",    
        "template": "libs/template",
        "gmaps": "http://maps.google.com/maps/api/js?v=3&sensor=false"
    },
    shim: {
        'backbone': {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'bootstrap': {
            deps: ['jquery']
        },
        'gmaps': {
            deps: ['jquery']
        },
        'main':{
            deps: ['jquery','gmaps']   
        }
    }
});

require(["main"], function (main) {})

但是在main.js中，当我尝试实例化我得到的地理编码器时，undefined不是一个函数“错误”

---

你知道我做错了什么吗？

我已经用插件解决了这个问题

一个简单的例子是：

require.config({
    paths: {
        'async': 'lib/requirejs-plugins/src/async'
    }
});

define(['async!http://maps.google.com/maps/api/js?sensor=false'], function() {
    // Google Maps API and all its dependencies will be loaded here.
});

---

下面是hjuster关于如何使用插件的一个快速示例

---

还有

goog

插件（需要async和propertyParser），可在

谷歌地图的使用示例：

require(["goog!maps,3,other_params:sensor=false"], function(){});

---

感谢user1706254，原因官方文档：使用了关键字“define”，这对我不起作用，但“require”可以正常工作

我无法直接加载：

require(["goog!maps,3,other_params:sensor=false"], function(){});

但使用异步方式实现了以下目的：

require(['async!http://maps.google.com/maps/api/js?sensor=false'], function(){});

---

@hjuster的回答为我指明了方向，我通过一个回调函数解决了这个问题

define(['async!http://maps.google.com/maps/api/js?key=YOURKEY!callback'],
    function (_ExpectedMap) {
                              callback(); 
                           });

请注意，url末尾的！callback以async！开头，加载操作完成后将调用callback方法

function callback()
{
    //Now load google maps API dependant libraries
    require(['gmapsLib'], function (googlemaps) {
                     window.GMaps = googlemaps;
                   }
}

---

我最近注意到另一个功能（onLoad）正在使用，而不是回调来防止超时错误。很有趣。

由于某种原因无法使插件正常工作，但这个解决方法节省了我的时间：

 require(['https://apis.google.com/js/client.js?onload=doNothing'], function() {
    // Poll until gapi is ready
    function checkGAPI() {
      if (gapi && gapi.client) {
        self.init();
      } else {
        setTimeout(checkGAPI, 100);
      }
    }

    checkGAPI();
  });
});

只要每隔100毫秒检查一次gapi是否准备就绪，直到它最终加载

在本文中找到了代码

我想你也可以试一下

if (google && google.maps && google.maps.Geocoder) {
    // now google.maps.Geocoder is gonna be defined for sure :)
}

---

使用Google Maps with require.js不需要异步插件。只需简单配置即可实现此目标：

require.config({
路径：{
gmaps:'//maps.googleapis.com/maps/api/js？'//添加问号是为了防止require.js添加.js后缀
},
垫片：{
GMAP：{
出口：“谷歌地图”
}
}
});
需要（['gmaps']，函数（gmaps）{
var中心={lat:-34.397，液化天然气：150.644}；
var map=new gmaps.map（document.getElementById（'map'）{
中心:中心,，
缩放：8
});
新的gmap标记({
地图：地图，
位置：中
});
})；

有任何网络错误吗？地图api JS是否实际加载？没有，没有加载…这个答案可能会有帮助-。我没有api密钥，因此它可能无法完全为我工作。似乎必须请求加载Geocoder。您能展示一下如何从configure.JS中定义的GMAP到新的google.maps.Geocoder（）吗？对于我来说，断点没有到达你评论的回调//Google Maps…将在这里加载。如何安装异步插件？嗯，它对我有效。goog模块要求在路径中定义“async”和“propertyParser”，就像这样，包括驼峰壳。顺便说一句，传感器现在什么都不做，可以忽略任何人可以得到吗API键来处理这个？据我所知，这不支持在URL中包含API键。只将一个API键硬编码到插件中并不难，但我认为这缺少了重点。我现在更喜欢使用异步模块手动请求URL，因为这使您能够完全控制URL。这是一种方法。对我来说，它很有效google places没有问题：

goog！maps，3，其他参数：key=XXX&libraries=places

if (google && google.maps && google.maps.Geocoder) {
    // now google.maps.Geocoder is gonna be defined for sure :)
}