如何阻止Leaflet弹窗关闭按钮跳转至/#close？（v1.7.1）

Leaflet 1.7.1默认的弹窗关闭按钮是带有href="#close"的链接元素，点击时会触发浏览器的锚点跳转行为，导致URL变为/#close。以下两种方案可以彻底阻止这个问题：

方案一：阻止默认关闭按钮的跳转行为 #

通过监听默认关闭按钮的点击事件，阻止其默认跳转动作，同时手动触发弹窗关闭：

import { useEffect, useRef } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const MapComponent = () => {
  const mapRef = useRef(null);
  const popupRef = useRef(null);

  useEffect(() => {
    if (!mapRef.current) {
      // 初始化地图
      const map = L.map('map').setView([51.505, -0.09], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
      mapRef.current = map;

      // 创建并打开弹窗
      const popup = L.popup()
        .setLatLng([51.505, -0.09])
        .setContent('<p>测试弹窗内容</p>')
        .openOn(map);
      popupRef.current = popup;
    }

    // 获取默认关闭按钮，添加事件监听
    const closeBtn = popupRef.current?._container.querySelector('.leaflet-popup-close-button');
    if (closeBtn) {
      const handleClose = (e) => {
        // 阻止锚点跳转的默认行为
        e.preventDefault();
        // 手动关闭弹窗
        popupRef.current.close();
      };
      closeBtn.addEventListener('click', handleClose);

      // 组件卸载时移除事件监听，避免内存泄漏
      return () => closeBtn.removeEventListener('click', handleClose);
    }
  }, []);

  return <div id="map" style={{ width: '100%', height: '400px' }} />;
};

export default MapComponent;

方案二：自定义弹窗关闭按钮 #

隐藏Leaflet默认的关闭按钮，自行实现关闭按钮逻辑，完全规避锚点跳转问题：

import { useEffect, useRef } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const MapComponent = () => {
  const mapRef = useRef(null);

  useEffect(() => {
    if (!mapRef.current) {
      const map = L.map('map').setView([51.505, -0.09], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
      mapRef.current = map;

      // 自定义弹窗内容，包含自定义关闭按钮
      const customPopupContent = `
        <div style="display: flex; justify-content: flex-end; margin: 0 0 8px;">
          <button class="custom-close-btn" style="border: none; background: transparent; cursor: pointer; font-size: 1.2rem;">×</button>
        </div>
        <p>自定义关闭按钮的弹窗内容</p>
      `;

      // 创建弹窗时隐藏默认关闭按钮
      const popup = L.popup({ closeButton: false })
        .setLatLng([51.505, -0.09])
        .setContent(customPopupContent)
        .openOn(map);

      // 给自定义关闭按钮绑定关闭事件
      const customCloseBtn = popup._container.querySelector('.custom-close-btn');
      if (customCloseBtn) {
        customCloseBtn.addEventListener('click', () => popup.close());
      }
    }
  }, []);

  return <div id="map" style={{ width: '100%', height: '400px' }} />;
};

export default MapComponent;

方案对比 #

• 方案一：保留Leaflet默认的弹窗样式，仅拦截跳转行为，改动小，适合想保留原有UI的场景。
• 方案二：完全自定义关闭按钮，可自由调整样式和交互逻辑，适合需要定制化弹窗UI的场景。

内容的提问来源于stack exchange，提问作者Sammith Gowda