backbone.js带Google地图 - 与此问题有关和听众的问题

Question

我有一个为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事件听众以及如何处理“此”。

我最初没有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”，因此无法使用setPosition（）将其围绕该标记的地图换成。

然后，我认为我可以在听众中删除匿名函数，并将其声明为视图方法，然后我将执行_.bindall（this，dragmarker”，“ 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();
});

不幸的是，这也使我回到了一个早期的问题，即“ this.dragmarker”中的“ this”不再指我构造的父对象，而是再次引用“ this.marker”。第二个听众也会发生同样的问题。

我完全被困在这里。有人对我如何解决这个问题有任何想法吗？

Answer 1

采用匿名功能 dragend 并明确绑定。

_.bindAll(this, 'dragMarker', 'dragMap');
google.maps.event.addListener(this.marker, "dragend", this.dragMarker);
/* etc ... */

这边走 this 即使脱离上下文，也将始终与CreateMap相关。

Answer 2

我通过使用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);
});

如果有人有不需要此黑客的解决方案，那么我全都是耳朵。