google-maps - 使用 Google map 、Stamen Tiles(现有的瓦片库)和 Require.js？

Question

我正在尝试编写一个模块来在 Require.js 下加载雄蕊平铺图，但我不确定如何最好地将它与 Require 一起使用。

如果你以前没有看过 Stamen map ，他们的网站是 Stamen Maps .

这是 map View 的代码， view.js

define([
  'jquery',
  'underscore',
  'backbone',
  'maps',
  'text!templates/map/view.html'
], function($, _, Backbone, maps, mapTemplate){
  var mapView = Backbone.View.extend({
    el: $(".map"),
    displayMap: function() {
      this.options = {
        center: new maps.LatLng(-37.8, 144.9),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
      };
      this.render();
    },
    render: function(){
      var compiledTemplate = _.template(mapTemplate);
      var $el = $(this.el);
      $el.html(compiledTemplate);
      this.map = new maps.Map($el.find('.map').get(0), this.options);
    }
  });
  return new mapView;
});

我正在加载以下模块的 map API:

map.js

define(['google!maps/3/sensor=false'], function() { 
  return google.maps;
});

具有 的依赖项google.js

define(['http://www.google.com/jsapi?key=THE_API_KEY&callback=define'], { 
  load: function( name, req, load, config ) { 
    if (config.isBuild) {
      onLoad(null);
    } else {
      var request = name.split('/'); 
      google.load(request[0], request[1], { 
        callback: load, 
        language: 'en', 
        other_params: ((typeof request[2] === 'string')?request[2]:'') 
      });
    }
  } 
});

问题是 Stamen map 图层似乎可以直接编辑 Google Maps 实例。你可以在这里看到 Stamen maps 的实现:
http://maps.stamen.com/js/tile.stamen.js?v1.1.1

google.maps.StamenMapType = function(name) {
  //Implementation
}

它似乎依赖于全局 google.maps 对象，我认为这是问题所在。

我不确定如何最好地将 Stamen 插件重写为对 require.js 友好，或者如果我需要，我真的很想使用它。除非我从 Require.js 中取出 Google map 和 Stamen 并正常加载它们(就像我对 Modernizr 所做的那样)，但我更愿意尝试以 Require.js 的方式进行操作。如果有这样的事情。

任何建议或提示将不胜感激。

Answer 1

我负责 tile.stamen.js。对不起，头痛。

这里的问题是我们的脚本需要访问 Google Maps 命名空间 ( google.maps ) 以便它可以创建 StamenMapType类并让它继承 Google 的 ImageMapType 的方法.如果您绝对需要使用 RequireJS(我不建议这样做，正是因为它使简单的东西变得很尴尬)，您需要重写 tile.stamen.js 的整个 Google 特定部分(第 155-177 行)看起来像这样:

exports.makeStamenMapType = function(name, gmaps) {
    if (!gmaps) gmaps = google.maps;
    var provider = getProvider(name);
    return new gmaps.ImageMapType({
        "getTileUrl": function(coord, zoom) {
            var index = (zoom + coord.x + coord.y) % SUBDOMAINS.length;
            return [
                provider.url
                    .replace("{S}", SUBDOMAINS[index])
                    .replace("{Z}", zoom)
                    .replace("{X}", coord.x)
                    .replace("{Y}", coord.y)
            ];
        },
        "tileSize": new gmaps.Size(256, 256),
        "name":     name,
        "minZoom":  provider.minZoom,
        "maxZoom":  provider.maxZoom
    });
};

然后你会使用:

var toner = makeStamenMapType("toner", gmaps);

在哪里 gmaps是您所需的 Google Maps API 对象。