Question

我看了一遍，但找不到答案。我有一张地图，当我点击它时会在我点击的位置添加标记。我正在将这些标记推入一个数组但是当我做一个标记时，似乎只是覆盖了数组中的那个，而不是向数组中添加另一个索引。无论地图上有多少个标记，数组总是看起来像这个[我]。这是代码

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);
    });
  },

如果这有任何区别，这是骨干视图的一部分。我只是不知道为什么当我按下一个标记时，它似乎会覆盖那里已有的标记。

编辑：好的我只知道为什么，每次点击制作新标记时，都会重置标记数组。有什么聪明的方法来解决这个问题吗？

Answer 1

问题是你在每次调用markers方法时都重新声明了addLatLng数组（你也是新的事件处理程序并且每次创建removeMarkers函数和一个闭包）

相反，您应该将markers数组作为视图的属性，如下所示：

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);
  }
});

Google地图标记不会增加数组

1 个答案: