javascript - 谷歌地图标记不递增数组

Question

我已经查遍了，但找不到答案。我有一张 map ，当我单击它时，它会在我单击的位置添加标记。我正在将这些标记插入一个数组中，但是当我执行一个标记时，似乎只是覆盖了之前数组中的标记，而不是向数组中添加另一个索引。无论 map 上有多少标记，数组总是看起来像这样[我]。这是代码

addLatLng: function(event) {
    var path = this.poly.getPath();
    var markers = [];

    path.push(event.latLng);
    this.calcDistance(path);

    var marker = new google.maps.Marker({
      position: event.latLng,
      title: '#' + path.getLength(),
      map: this.map
    });
    markers.push(marker);

    console.log(markers);
    console.log(marker);
    // debugger;
    function removeMarkers(map) {
      for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
      }
      markers = [];
    }

    $('#btn-clear-map').on('click', function(event) {
      event.preventDefault();
      removeMarkers(null);
    });

    $('#btn-clear-point').on('click', function(event) {
      event.preventDefault();
      markers[markers.length -1].setMap(null);
    });
  },

如果这有什么区别的话，这是主干 View 的一部分。我只是不知道为什么当我将一个标记插入其中时，它似乎会覆盖已经存在的标记。

编辑:好吧，我刚刚弄清楚为什么，每次我单击创建新标记时，它都会重置标记数组。有什么聪明的方法可以解决这个问题吗？

Answer 1

问题是您在每次调用 addLatLng 方法时重新声明 markers 数组(而且您是新的事件处理程序并创建 removeMarkers 函数和每次闭包)

相反，您应该将标记数组保留为 View 的属性，如下所示:

Backbone.View.extend({
  initialize: function() {
    this.markers = [];
  },
  events: {
    'click #btn-clear-map': 'removeMarkers',
    'click #btn-clear-point': 'clearPoint',
  },
  render: function() {},
  addLatLng: function(event) {
    var path = this.poly.getPath();
    path.push(event.latLng);
    this.calcDistance(path);
    var marker = new google.maps.Marker({
      position: event.latLng,
      title: '#' + path.getLength(),
      map: this.map
    });
    this.markers.push(marker);
  },
  removeMarkers: function(event) {
    event.preventDefault();
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(null);
    }
    this.markers = [];
  },
  clearPoint: function(event) {
    event.preventDefault();
    this.markers[this.markers.length - 1].setMap(null);
  }
});