绘制点位弹层之后，缩放地图鼠标移入点位会出现卡顿现象)
我在地图上绘制了多个点位，每个点位有对应的弹层显示，然后我缩放地图层级的时候，发现鼠标hover的时候会出现页面频繁卡顿一闪一闪的问题，类似于在重复设置中心点位的感觉，查阅资料之后发现：
Leaflet 的L.popup默认autoPan: true。弹层若有一部分在视口外，就会自动平移地图把弹层装进来。你这边在 mouseover 时用showAllStationPopups()一次加很多个弹层，再叠加每站的offset，容易出现：
- 多个弹层连续触发“自动进屏”，地图被反复平移；
- 和自定义
offset争控制权，表现成整体发飘、偏移。
解决方法就是L.popup({...})增加autoPan: false，让地图不要在打开/展示弹层时自动平移。
showAllStationPopups() { // console.log("显示所有弹层"); // 先移除所有旧弹窗（关键：避免弹窗叠加） this.atopMap.eachLayer((layer) => { if (layer instanceof L.Popup) { this.atopMap.removeLayer(layer); } }); // 为每个站点创建并显示弹窗 this.point.forEach((stationData) => { // 动态渲染字段 if (stationData.fields && stationData.fields.length > 0) { stationData.fields.forEach((field) => { const value = stationData[field.key] !== undefined ? stationData[field.key] : "-"; const unit = field.unit || ""; }); } const stationPopup = ` <div style="color: #fff;"> <div class="point-header"> <img style="width: 15px; height: 19px;" src="${this.nameIcon}" alt=""></img> <div style="font-size: 14px;color: #fff; text-align: center;"> ${stationData.name} </div> <div style="width: 20px; height: 25px;"></div> </div> </div> `; L.popup({ maxWidth: 250, maxHeight: 250, offset: L.point(stationData.offsetX, stationData.offsetY), autoClose: false, // 禁用自动关闭 closeOnClick: false, // 点击地图时不关闭 autoPan: false, // 避免弹层触边时 Leaflet 自动平移地图 }) .setLatLng([stationData.latitude, stationData.longitude]) .setContent(stationPopup) .addTo(this.atopMap); // 使用 addTo 而不是 openOn }); },
