如何使用RequireJS加载Google Maps API？

我正在努力与requireJS加载gmaps api。 这是我试过的：

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里面，当我尝试实例化geocoder时，得到了,, undefined不是一个函数“错误。

 var geocoder = new google.maps.Geocoder(); 

任何想法我可能做错了什么？

Answer 1

我已经设法与asynchronous插件进行整理。

一个简单的例子是：

 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. }); 

Answer 2

感谢user1706254导致官方文档︰https: //github.com/millermedeiros/requirejs-plugins/正在使用关键字'定义'，这是不适合我，但'要求'工作正常。

我无法直接加载：

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

但是，使用asynchronous方式的窍门是：

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

Answer 3

从hjusterinheritance下面是如何使用asynchronous插件的快速示例

https://gist.github.com/millermedeiros/882682

Answer 4

还有一个goog插件（需要async和propertyParser），可在github上find

Google地图的使用示例：

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

Answer 5

@ hjuster的回答引导了我，我已经通过callback函数解决了。

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

请注意，url结尾的！callback以asynchronous开始！ ，加载操作完成时调用callback方法。

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

还有一个问题，我最近注意到，另一个函数（onLoad）正在使用，而不是callback，以防止超时错误。 有趣。

Answer 6

由于某种原因无法使插件工作，但是这个解决方法节省了我的一天：

  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(); }); }); 

只要检查gapi是否每100毫秒准备好，直到最终加载。

发现这篇文章中的代码http://dailyjs.com/2012/12/06/backbone-tutorial-2/

我想你也可以尝试一下

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