AMap 地图在 React 中加载后无法点击 Marker 怎么办？

你的问题我遇到过，主要有两个坑。

第一个问题是 marker 没有用 ref 保存，每次组件渲染或 mapInstance 变化时，marker 被重新创建了，但事件绑定可能没跟上。

第二个更常见：AMap 2.0 版本里，Marker 得先完全挂载到地图上才能正确触发事件，有时候直接写 marker.on('click') 会失效。

我的做法是这么改：

const mapRef = useRef(null);

const markerRef = useRef(null);



useEffect(() => {

  if (!mapInstance) return;

  

  // 如果 marker 已经存在就直接跳过，避免重复创建

  if (markerRef.current) return;

  

  const marker = new AMap.Marker({

    position: [116.397428, 39.90923],

    map: mapInstance,

    clickable: true, // 这个很关键，默认是 true 但最好显式写

  });

  

  // 用 AMap.event.addListener 更稳妥

  AMap.event.addListener(marker, 'click', () => {

    console.log('marker clicked!');

  });

  

  markerRef.current = marker;

  

  // 清理函数

  return () => {

    if (markerRef.current) {

      markerRef.current.setMap(null);

      markerRef.current = null;

    }

  };

}, [mapInstance]);

还有一个容易忽略的点：检查一下你的 mapInstance 是怎么获取的。如果是通过 AMap.Map 创建的异步操作，确保地图实例已经完全初始化完成再创建 marker。

你试试看这么改能不能行，有问题再贴代码交流。

这个问题其实不复杂，大概率是 mapInstance 还没准备好你就开始绑定事件了。

你试下改成这样：

useEffect(() => {

  if (!mapInstance) return;

  

  const marker = new AMap.Marker({

    position: [116.397428, 39.90923],

    map: mapInstance,

    clickable: true, // 显式指定

  });

  

  // 换成 AMap.Event.addListener

  AMap.Event.addListener(marker, 'click', () => {

    console.log('marker clicked!');

  });

}, [mapInstance]);

两个改动：

一是加了 clickable: true，虽然默认是 true，但显式写出来更稳妥。

二是把 marker.on() 换成 AMap.Event.addListener()，在高德地图里这两种写法都支持，但有些版本下 addListener 更稳。

如果还是不行，那基本就是 mapInstance 的问题了——你得确认这个变量到底是啥时候赋值的。如果是异步加载地图后赋的值，建议在 mapInstance 后面加个 complete 事件监听，等地图加载完再操作：

mapInstance.on('complete', () => {

  // 这里再创建 marker 和绑定事件

});

你可以先打个 console.log(mapInstance) 看看是不是 undefined。