我有一个为 Google Maps v3 创建的模块,我正试图将其转换为 Backbone.js View 构造函数。
到目前为止,这是我的 View 模块:我将在代码之后解释我遇到的问题:
pg.views.CreateMap = Backbone.View.extend({
tagName: "div",
className: "map",
events: {},
latitude: "-23.56432",
longitude: "-46.65183",
initialize: function() {
_.bindAll(this, 'render', 'dragMarker', 'dragMap');
this.latlng = new google.maps.LatLng(this.latitude, this.longitude);
var myOptions = {
zoom: 16,
center: this.latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map($(this.el)[0], myOptions);
this.marker = new google.maps.Marker({
map: this.map,
position: this.latlng,
draggable: true
});
google.maps.event.addListener(this.marker, "dragend", this.dragMarker());
google.maps.event.addListener(this.map, "dragend", this.dragMap());
},
render: function() {
return this;
},
dragMarker: function() {
this.latlng = this.marker.getPosition();
this.map.panTo(this.latlng);
},
dragMap: function() {
this.latlng = this.map.getCenter();
this.marker.setPosition(this.latlng);
}
});
我遇到的问题是 Google map 事件监听器以及“this”的处理方式。
我最初没有 dragMarker 和 dragMap 方法,而是在初始化 block 中使用这两个方法:
google.maps.event.addListener(this.marker, "dragend", function() {
this.latlng = this.marker.getPosition();
this.map.panTo(this.latlng);
});
google.maps.event.addListener(this.map, "dragend", function() {
this.latlng = this.map.getCenter();
this.marker.setPosition(this.latlng);
});
我在第一种方法中遇到的问题是,那些匿名函数中的“this”分别指的是“this.marker”和“this.map”。第一种方法的问题在于,在第一个监听器中,我无法引用“this.map”,因此无法执行 panTo()。对于第二个监听器,我无法引用“this.marker”,因此无法使用 setPosition() 使该标记周围的 map 重新居中。
然后我想到我可以在监听器中提取匿名函数并将它们声明为 View 的方法,然后我将执行 _.bindAll(this, "dragMarker", "dragMap");
这种方法的问题是我必须像这样在事件 block 中编写监听器:
google.maps.event.addListener(this.marker, "dragend", this.dragMarker());
google.maps.event.addListener(this.map, "dragend", this.dragMap());
这意味着当我用 newmap = new pg.views.CreateMap; 调用构造函数时; “this.dragMarker()”和“this.dragMap()”被立即评估,而不是在“dragend”事件被触发时被评估为回调。
我认为没问题,然后将它们包装在匿名函数中,如下所示:
google.maps.event.addListener(this.marker, "dragend", function() {
this.dragMarker();
});
google.maps.event.addListener(this.map, "dragend", function() {
this.dragMap();
});
不幸的是,这也让我回到了之前的一个问题,即“this.dragMarker”中的“this”不再指代我构造的父对象,而是再次指代“this.marker”。第二个监听器也会出现同样的问题。
我完全被困在这里了。有人对我如何解决这个问题有任何想法吗?
最佳答案
获取在 dragend
上调用的匿名函数并显式绑定(bind)。
_.bindAll(this, 'dragMarker', 'dragMap');
google.maps.event.addListener(this.marker, "dragend", this.dragMarker);
/* etc ... */
这样 this
将始终绑定(bind)到 CreateMap,即使在上下文之外调用也是如此。
关于javascript - 带有谷歌地图的 Backbone.js - 这个问题和听众,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4379303/