Leaflet地图双击添加自定义图片标记弹窗技术求助

下面是完整的可运行代码，直接复制就能测试，核心要点我会标注出来：

<!DOCTYPE html>
<html>
<head>
    <!-- 引入Leaflet的CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <!-- 引入Leaflet的JS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style>
        #map { height: 100vh; }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        // 初始化地图
        const map = L.map('map').setView([51.505, -0.09], 13);

        // 添加基础地图瓦片层
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);

        // 自定义图片标记的图标
        const customMarkerIcon = L.icon({
            iconUrl: 'https://cdn-icons-png.flaticon.com/512/149/149071.png', // 替换成你的标记图片路径
            iconSize: [32, 32], // 标记图片的尺寸
            iconAnchor: [16, 32], // 图标锚点（对应标记的经纬度位置，设为图片底部中心）
            popupAnchor: [0, -32] // 弹窗相对于图标的偏移位置（向上偏移避免挡住标记）
        });

        // 监听地图双击事件
        map.on('dblclick', function(e) {
            // 获取双击位置的经纬度
            const latlng = e.latlng;

            // 创建图片标记并添加到地图
            const marker = L.marker(latlng, { icon: customMarkerIcon }).addTo(map);

            // 绑定弹窗，内容为图片
            marker.bindPopup(`<img src="https://picsum.photos/200/150" alt="弹窗图片" style="width:200px; height:auto;">`).openPopup();
        });
    </script>
</body>
</html>

关键细节说明 #

• 自定义图片标记：L.icon是Leaflet实现图片标记的核心方法，必须设置iconUrl为你的标记图片路径，iconSize、iconAnchor和popupAnchor用来调整标记和弹窗的位置，避免错位。
• 双击事件捕获：通过map.on('dblclick', ...)监听双击动作，e.latlng能直接拿到点击位置的经纬度，用来定位标记。
• 弹窗内容设置：bindPopup里可以直接写HTML代码，用<img>标签插入你需要的弹窗图片，设置好宽高样式即可。

把代码里的两个图片路径（标记图标和弹窗图片）替换成你自己的资源地址就能直接使用，新手也能快速上手。

内容的提问来源于stack exchange，提问作者Markus Viljoen