google-maps-api-3 - 如何使用 RequireJS 加载 Google Maps API？

Question

我正在努力用 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 中，当我尝试实例化我得到的地理编码器时，未定义不是函数”错误。

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

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

Answer 1

我已经设法使用异步插件对其进行了整理。

一个简单的例子是：

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/使用的关键字'define'对我不起作用，但'require'工作正常。

我无法直接加载：

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

但是使用异步方式就可以了：

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

Answer 3

您不需要异步插件即可将 Google 地图与 require.js 一起使用。只需使用简单的shim配置即可实现该目标：

require.config({
    paths: {
        gmaps: '//maps.googleapis.com/maps/api/js?' // question mark is appended to prevent require.js from adding a .js suffix
    },
    shim: {
        gmaps: {
            exports: 'google.maps'
        }
    }
});

require(['gmaps'], function (gmaps) {
    var center = {lat: -34.397, lng: 150.644}; 
    var map = new gmaps.Map(document.getElementById('map'), {
        center: center,
        zoom: 8
    });
    new gmaps.Marker({
        map: map,
        position: center
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>

<div id="map" style="width: 100%; height: 200px"></div>

Answer 4

从 hjuster 开始，这里是一个如何使用异步插件的快速示例

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

Answer 5

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

谷歌地图的使用示例：

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

Answer 6

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

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

注意URL 末尾的!callback以async 开头！, 加载操作完成时正在调用回调方法。

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

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

Answer 7

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

 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 :)
}