Backbone.js с Google Maps - проблемы с этим и слушателей
-
09-10-2019 - |
Вопрос
У меня есть модуль, который я создал для Google Maps V3, которые я пытаюсь преобразовать в Backbone.js View Constructor.
Вот мой модуль просмотра до сих пор: я объясню проблемы, которые у меня есть после кода:
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 и как обрабатывается «это».
У меня первоначально не было методов 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.marker» и "this.map" соответственно. Проблема с этим первым подходом было то, что в первом слушателе у меня не было никакого способа ссылаться на «this.map» и поэтому не мог выполнить panto (). Со втором слушателем у меня не было никакого способа ссылаться на «this.marker», и поэтому не мог повторять карту вокруг этого маркера, используя настройку ().
Затем я подумал, что я смогу вытащить анонимные функции в слушателях и объявить их как методы зрения, которые я бы провел _.BindAll («,« Добрмармар »,« Dragmap »);
Проблема с таким подходом состоит в том, что я должен был написать слушателей в блоке событий, как так:
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 ()" были оценены немедленно вместо того, чтобы быть оцененным в качестве обратного вызова, когда срабатывает событие «перетаскивания».
Нет проблем, которые я думал, а затем завернул анонимные функции, как так:
google.maps.event.addListener(this.marker, "dragend", function() {
this.dragMarker();
});
google.maps.event.addListener(this.map, "dragend", function() {
this.dragMap();
});
К сожалению, это также возвращает меня к более ранней проблеме, что «это« в этом ». IS.Dragmarker» больше не относится к исходному объекту, которое я построил, но вместо этого обращаюсь к «this.marker». Та же проблема возникает со вторым слушателем.
Я полностью застрял здесь. У кого-нибудь есть идеи о том, как я решаю это?
Решение
Принимать анонимные функции, вызванные dragend
и связываться с явным.
_.bindAll(this, 'dragMarker', 'dragMap');
google.maps.event.addListener(this.marker, "dragend", this.dragMarker);
/* etc ... */
Сюда this
всегда будет привязан к CreateMap, даже если он вызван вне контекста.
Другие советы
Я решил эту проблему, используя этот взлом в JavaScript.
var self = this;
google.maps.event.addListener(this.marker, "dragend", function() {
self.latlng = this.getPosition();
self.map.panTo(self.latlng);
});
google.maps.event.addListener(this.map, "dragend", function() {
self.latlng = this.getCenter();
self.marker.setPosition(self.latlng);
});
Если у кого-то есть решение, которое не требует этого взлома, я все уши.