如何避免Google Maps对象重复添加已存在的点击监听器？

嘿，这个问题我之前在项目里也碰到过！Google Maps API本身并没有提供直接检查某个监听器是否已存在的方法，但我们可以通过手动管理状态来避免重复添加click监听器。这里有几个实用的解决方案：

方案1：用标记变量跟踪监听器状态 #

这是最直接的方式——给你的map对象附加一个自定义标记，记录click监听器是否已经添加过：

// 初始化地图
var map = new google.maps.Map(mapWrapperElem, mapOptions);
// 给map加个自定义属性，标记监听器状态
map.hasClickListener = false;

function addMapClickListener() {
  // 只有当监听器还没添加时才执行
  if (!map.hasClickListener) {
    map.addListener("click", function(event){
      // 这里写你的业务逻辑
      console.log("地图被点击了！坐标：", event.latLng);
    });
    // 添加后把标记设为true，防止重复添加
    map.hasClickListener = true;
  }
}

// 调用这个函数，哪怕多次调用也只会添加一次监听器
addMapClickListener();
addMapClickListener(); // 第二次调用不会生效

这种方式简单易懂，适合大多数基础场景。

方案2：保存监听器引用，先移除再添加（适合需要更新逻辑的场景） #

如果你的需求是要动态更新click监听器的逻辑，同时不想多个监听器并存，可以先移除已有的监听器，再添加新的。这时候需要保存监听器的引用：

var map = new google.maps.Map(mapWrapperElem, mapOptions);
// 保存监听器的引用，初始为null
var mapClickListener = null;

function updateMapClickListener() {
  // 如果已有监听器，先移除它
  if (mapClickListener) {
    google.maps.event.removeListener(mapClickListener);
  }
  // 添加新的监听器，并把引用存起来
  mapClickListener = map.addListener("click", function(event){
    // 这里写更新后的业务逻辑
    console.log("更新后的点击逻辑触发！坐标：", event.latLng);
  });
}

// 第一次添加监听器
updateMapClickListener();
// 后续更新时，会先移除旧监听器再添加新的，不会出现重复
updateMapClickListener();

这个方案适合需要调整监听器逻辑的场景，确保同一时刻只有一个click监听器在运行。

方案3：用闭包封装状态（更优雅的模块化方式） #

如果不想污染map对象的属性，可以用闭包来隐藏状态变量，避免全局作用域污染：

var map = new google.maps.Map(mapWrapperElem, mapOptions);

// 用立即执行函数创建闭包，保存状态
var addMapClickListener = (function() {
  var isListenerAdded = false;
  return function() {
    if (!isListenerAdded) {
      map.addListener("click", function(event){
        // 业务逻辑
        console.log("闭包管理的点击事件触发！坐标：", event.latLng);
      });
      isListenerAdded = true;
    }
  };
})();

// 多次调用也只会添加一次监听器
addMapClickListener();
addMapClickListener();

闭包里的isListenerAdded变量只会在内部生效，不会影响外部，代码更干净。

内容的提问来源于stack exchange，提问作者Username