能否通过addListener检测MapMyIndia地图内置按钮点击事件？

可以检测内置的放大、缩小、展开按钮点击，但你当前使用的地图全局click/mousemove事件无法直接从event.target获取按钮标识，需要换以下两种方式实现：

方案一：直接监听控件DOM元素的点击事件 #

MapMyIndia的内置控件会带有特定的类名（可通过浏览器F12开发者工具查看具体类名），直接给这些DOM元素绑定点击事件即可：

// 等待地图初始化完成后执行（可放在地图初始化的回调函数中）
document.addEventListener('DOMContentLoaded', () => {
  // 获取对应控件元素，类名以实际查看到的为准
  const zoomInBtn = document.querySelector('.mmi-zoom-control__in');
  const zoomOutBtn = document.querySelector('.mmi-zoom-control__out');
  const expandBtn = document.querySelector('.mmi-expand-control');

  // 绑定放大按钮事件
  zoomInBtn?.addEventListener('click', () => {
    console.log('点击了放大按钮');
    // 执行你的自定义逻辑
  });

  // 绑定缩小按钮事件
  zoomOutBtn?.addEventListener('click', () => {
    console.log('点击了缩小按钮');
  });

  // 绑定展开按钮事件
  expandBtn?.addEventListener('click', () => {
    console.log('点击了展开按钮');
  });
});

注意：如果地图是异步加载渲染的，要确保在控件DOM生成后再执行上述代码，避免获取不到元素。

方案二：结合地图状态事件与控件点击标记 #

如果需要区分缩放操作是通过按钮还是其他方式（如鼠标滚轮、拖拽）触发的，可以结合地图的状态事件与控件点击标记：

let isZoomBtnTriggered = false;

// 先给缩放按钮绑定点击标记
document.querySelector('.mmi-zoom-control__in')?.addEventListener('click', () => {
  isZoomBtnTriggered = true;
});

document.querySelector('.mmi-zoom-control__out')?.addEventListener('click', () => {
  isZoomBtnTriggered = true;
});

// 监听地图缩放变化事件
map.addListener('zoom_changed', () => {
  if (isZoomBtnTriggered) {
    console.log('通过内置缩放按钮触发了缩放');
    isZoomBtnTriggered = false; // 重置标记
  } else {
    console.log('通过其他方式触发了缩放');
  }
});

关键提示 #

• 不同版本的MapMyIndia控件类名可能存在差异，务必通过开发者工具确认控件的实际类名或属性。
• 若使用了自定义控件样式，需对应调整DOM选择器。

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