我正在尝试编写一个模块来在 Require.js 下加载雄蕊平铺图,但我不确定如何最好地将它与 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:
地图.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 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 地图和 Stamen 并正常加载它们(就像我对 Modernizr 所做的那样),但我更愿意尝试以 Require.js 的方式进行操作。如果有这样的事情。
任何建议或提示将不胜感激。