在 Leaflet 中实现一个始终固定于地图视口中心的标记，关键在于正确监听地图移动事件并动态更新标记位置；需注意事件回调参数是 LeafletEvent 对象，地图实例需通过 event.target 访问。
在 leaflet 中实现一个始终固定于地图视口中心的标记，关键在于正确监听地图移动事件并动态更新标记位置；需注意事件回调参数是 `leafletevent` 对象，地图实例需通过 `event.target` 访问。
要在 Leaflet 地图中创建一个“视觉锚点”式标记（即无论用户如何平移、缩放地图，该标记始终精确位于当前视口正中心），核心思路是：将标记的地理坐标实时同步为地图当前中心点坐标。但实践中常见错误是误将事件对象当作地图实例使用——例如直接调用 map.getCenter() 时传入了 moveend 回调中的 event 参数，而 event 是 L.LeafletEvent 类型，并无 getCenter() 方法，从而触发 Uncaught TypeError: map.getCenter is not a function。
✅ 正确做法是：在事件监听器中通过 event.target 获取触发事件的地图实例，再调用其 getCenter()：
// 初始化标记（初始位置设为地图中心）
const currentPositionMarker = L.marker(map.getCenter(), {
icon: customIcon,
interactive: false, // 可选：禁用交互，避免遮挡或误操作
keyboard: false // 可选：禁用键盘焦点
}).addTo(map);
// 定义居中更新函数
function centerMarkerOnMap(event) {
const mapInstance = event.target; // ✅ 正确获取地图对象
currentPositionMarker.setLatLng(mapInstance.getCenter());
}
// 绑定事件（注意：moveend 足够，无需监听 move、zoom 等高频事件）
map.on('moveend', centerMarkerOnMap);
⚠️ 注意事项：
- 避免性能陷阱：不要监听 move 或 zoom 事件（触发过于频繁），moveend 在用户完成拖拽/缩放后触发一次即可，兼顾响应性与性能。
- 标记不可拖动：确保未设置 draggable: true，否则用户可能手动拖离中心，破坏设计意图。
- 图标建议轻量化：使用简洁、对称的 SVG 图标，并考虑设置 iconAnchor 使其视觉中心与地理坐标严格对齐。
- SvelteKit 集成提示：若在 onMount 中初始化地图，请确保 DOM 元素已挂载且尺寸确定；必要时可在 map.invalidateSize() 后再设置初始中心。
? 进阶优化（可选）：
如需更平滑的视觉效果（例如过渡动画），可通过 CSS transform 模拟“浮动中心点”，但需配合 map.getPixelOrigin() 和 map.latLngToLayerPoint() 实现像素级定位——不过这会脱离地理坐标系，适用于纯 UI 覆盖层场景，而非真实地理标记。
总结：Leaflet 的事件系统遵循标准发布-订阅模式，event.target 是访问原生地图实例的唯一可靠途径。掌握这一机制，即可稳健实现包括中心标记、动态比例尺、实时地理围栏可视化等各类交互功能。
