遍历数组生成谷歌地图Marker时如何添加点击事件

嘿，我一眼就看出问题所在啦！你现在的代码里有两个关键错误导致点击事件绑定失败，咱们来一步步修正：

问题分析 #

• 你在this.allListings.map()的回调里创建了google.maps.Marker实例，但没有返回这个实例，所以最终markers数组里全是undefined。
• 你后面调用marker.addListener()时，用的是原数组里的业务数据对象，而不是谷歌地图生成的Marker实例，这肯定没法绑定上地图的事件监听。

修正后的代码 #

<script>
export default {
  // ...其他组件选项
  methods: {
    // 先确保toggleBounce方法存在，定义在组件methods里
    toggleBounce() {
      if (this.getAnimation() !== null) {
        this.setAnimation(null);
      } else {
        this.setAnimation(window.google.maps.Animation.BOUNCE);
        // 可选：加定时器让弹跳2秒后停止
        setTimeout(() => this.setAnimation(null), 2000);
      }
    }
  },
  async mounted() {
    try {
      const google = await gmapsInit();
      const geocoder = new google.maps.Geocoder();
      const map = new google.maps.Map(this.$el);
      geocoder.geocode({ address: "Salt Lake City" }, (results, status) => {
        if (status !== "OK" || !results[0]) {
          throw new Error(status);
        }
        map.setCenter(results[0].geometry.location);
        map.fitBounds(results[0].geometry.viewport);
      });
      // 修正map回调，返回Marker实例并绑定事件
      const markers = this.allListings.map(listing => {
        // 创建Marker实例并保存到变量里
        const mapMarker = new google.maps.Marker({
          ...listing,
          map,
          title: listing.businessName
        });
        // 对谷歌地图的Marker实例绑定点击事件
        mapMarker.addListener("click", () => {
          // 用call改变this指向，让toggleBounce里的this指向当前Marker实例
          this.toggleBounce.call(mapMarker);
        });
        // 返回实例，方便后续可能的批量操作
        return mapMarker;
      });
    } catch (error) {
      console.error(error);
    }
  },
};
</script>

关键修正点说明 #

1. 保存Marker实例：把创建的google.maps.Marker赋值给mapMarker变量，拿到真正的地图标记对象。
2. 正确绑定事件：对mapMarker调用addListener，而不是原业务数据对象。
3. 作用域处理：用call(mapMarker)改变toggleBounce里的this指向，让它指向当前Marker实例，这样才能调用getAnimation()、setAnimation()这些Marker专属方法。
4. 返回实例：在map回调里返回mapMarker，让markers数组保存所有标记实例，方便后续批量操作（比如移除所有标记）。

内容的提问来源于stack exchange，提问作者Ben C. Isaksen