4

Require.js で Stamen タイル マップをロードするモジュールを作成しようとしていますが、Require での最適な使用方法がわかりません。

Stamen マップをまだ見たことがない場合は、Stamen Mapsにサイトがあります。

これは、マップ ビュー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;
});

次のモジュールにマップ 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 マップ レイヤーが Google マップ インスタンスを直接編集しているように見えることです。ここで Stamen マップの実装を確認できます: http://maps.stamen.com/js/tile.stamen.js?v1.1.1

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

グローバルな google.maps オブジェクトに依存しているようです。これが問題の原因であると私は信じています。

Stamen プラグインを require.js に適したものにするためにどのように書き直すのが最適なのか、またはその必要がある場合はどうすればよいかわかりません。Google マップと Stamen を Require.js から取り出して通常どおりにロードしない限り (Modernizr で行うように)、Require.js の方法で試してみたいと思います。そんなことあるなら。

アドバイスやヒントをいただければ幸いです。

4

1 に答える 1

8

tile.stamen.jsを担当しています。頭が痛くてすみません。

ここでの問題は、スクリプトが Google マップの名前空間 ( google.maps) にアクセスして、クラスを作成し、StamenMapTypeGoogle の からメソッドを継承できるようにする必要があること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 オブジェクトはどこにありますか。

于 2012-07-03T19:07:08.480 に答える