У меня есть модуль, который я создал для Google Maps v3, который я пытаюсь преобразовать в конструктор представления Backbone.js.
Вот мой модуль представления на данный момент: я объясню свои проблемы после код:
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 Maps и с тем, как «this» обрабатывается.
Изначально у меня не было методов dragMarker и dragMap, а вместо этих двух в блоке инициализации:
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 (). Со вторым слушателем я никак не мог сослаться на "
google.maps.event.addListener(this.marker, "dragend", function() {
this.dragMarker();
});
google.maps.event.addListener(this.map, "dragend", function() {
this.dragMap();
});
К сожалению, это также возвращает меня к более ранней проблеме, заключающейся в том, что «this» в «this.dragMarker» больше не ссылается на созданный мной родительский объект, а вместо этого снова ссылается на «this.marker». Та же проблема возникает со вторым слушателем.
Я полностью застрял здесь. У кого-нибудь есть идеи, как я могу это решить?