使用require.js的AMD版本Google Maps V3是什么？

Question

有人使用过Googlemaps V3和require.js之类的东西吗？需要它是AMD版本的吗？已经有人做过这样的事情了吗？

- Dane W

Answer 1

在 `require.js` 中，您可以使用异步插件，然后像这样调用它：

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

- puckhead

---

注意，在运行RequireJS优化器后，优化脚本将无法加载Google Maps API。 - Rubens Mariuzzo

你如何像这样设置API密钥？http://maps.google.com/maps/api/js?key=<MY_KEY>&sensor=false - maxwell2022

Answer 2

你也可以使用jQuery.Deferred()和一些全局变量来做到这一点（并不理想，但我需要这样做才能使用grunt rjs来优化我的文件，因为它无法异步工作）：

// gmapsDone.js
window._mapsLoaded = $.Deferred();
window.gmapsLoaded = function(data) {
  delete window.gmapsLoaded;
  _mapsLoaded.resolve();
};

define(["http://maps.google.com/maps/api/js?v=3&sensor=false&callback=gmapsLoaded"], function(gmaps) {
  "use strict";

  return window._mapsLoaded.done;
});

然后，使用它：

define(["gmapsDone"], function(gmapsDone) {
  function load() {
    // Do something
  }
  gmapsDone(load);
});

https://gist.github.com/taktran/5389668

受http://blog.pixelingene.com/2011/10/using-jquery-dot-deferred-and-requirejs-to-lazy-load-google-maps-api/启发

- zlog

---

谢谢zlog - 它正在工作 - 你能看一下http://stackoverflow.com/questions/23515964/object-scope-in-javascript-requirejs吗？ - piernik

Answer 3

我最近通过一个 $.Deferred 的方法帮助朋友解决了这个问题。这种方法与优化器兼容，不会引起多次脚本加载。

该模块

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

});

这个模块可以在Gist上找到：https://gist.github.com/MattSurabian/7868115

使用方法

使用以上模块并利用Promise解决方案返回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");
        });
    });

我在这里写了一篇关于这种方法的简短博客文章，可能会对您有所帮助：RequireJS项目和异步加载Google Maps API

- Matt Surabian

Answer 4

我制作了一个Google Maps AMD loader plugin，它在async!加载器的基础上添加了一些功能。

require.config({
  googlemaps: {
    params: {
      key: 'abcd1234',        // sets api key
      libraries: 'geometry'   // set google libraries
    }
  }
});
require(['googlemaps!'], function(gmaps) {
  // google.maps available as gmaps
  var map = new gmaps.Map('map-canvas');
});

- edan

---

我需要的就是你所提供的。如果我在单页应用程序中使用它，是否可以销毁上面定义的 gmaps？清除监听器怎么样？ - Muhaimin