track-pointer

本文回答：trackPointer() 跟随鼠标的 Popup 用法。

一、基本用法

const popup = new vjmap.Popup({ closeButton: false, closeOnClick: false })
  .setHTML("坐标")
  .trackPointer()
  .addTo(map);

• trackPointer() 会让 popup 锚点永远在光标下，不依赖 lngLat。
• 对大部分场景，建议同时 closeOnClick: false + closeButton: false。

二、动态更新内容

map.on("mousemove", e => {
  popup.setHTML(`(${e.lngLat.lng.toFixed(4)}, ${e.lngLat.lat.toFixed(4)})`);
});

三、只在某图层上跟随

const popup = new vjmap.Popup({ closeButton: false, closeOnClick: false });

map.on("mouseenter", "my-layer", () => popup.addTo(map).trackPointer());
map.on("mouseleave", "my-layer", () => popup.remove());

map.on("mousemove", "my-layer", e => {
  popup.setHTML(e.features[0].properties.name);
});

四、和 setLngLat 互斥

• setLngLat(ll) 固定到经纬度；
• trackPointer() 取消 lngLat 绑定，跟光标。
• 先调哪个，后调的覆盖。

五、触摸屏行为

trackPointer 的 popup 由内置 CSS 控制显隐：只在鼠标悬停地图（.vjmapgis-map:hover）时显示，按住鼠标（拖图，:active）或移出地图时自动隐藏；触屏没有 hover，故不显示。要兼容手机，检测 pointerType === "touch" 时切回 setLngLat。

六、性能

trackPointer 会在每次 mousemove 重新定位 DOM。频繁更新 setHTML 会影响性能，建议：

let lastText = "";
map.on("mousemove", e => {
  const text = getLayer(e);
  if (text !== lastText) {
    popup.setHTML(text);
    lastText = text;
  }
});

或节流：

map.on("mousemove", throttle(e => popup.setHTML(...), 100));

七、常见坑

1. closeButton: true 时显示 ×，跟着光标显得奇怪；通常设 false。
2. closeOnClick: true 会在点击地图任意处时关闭 popup，跟随效果断；设 false。
3. 无需自己禁 pointer-events：内置 CSS 已有 .vjmapgis-popup-track-pointer * { pointer-events: none }，popup 不会遮住鼠标事件。
4. 忘了 addTo(map)：trackPointer 能生效但看不到，因为 popup 没加到地图。