【Leaflet.js实战】地图标记与弹窗：从基础到高级的完整实现

最新推荐文章于 2025-10-25 10:00:08 发布

原创

最新推荐文章于 2025-10-25 10:00:08 发布 · 624 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

前言：标记和弹窗是地图应用的核心功能。本文将深入讲解Leaflet标记系统的各种用法，从基础标记到自定义图标，从简单弹窗到复杂交互，助你打造专业级地图应用。

一、基础标记系统

1.1 标记创建与配置

// 基础标记创建
const marker = L.marker([39.9042, 116.4074]).addTo(map);

// 带配置的标记
const configuredMarker = L.marker([39.9042, 116.4074], {
   
   
    title: '天安门',           // 鼠标悬停提示
    opacity: 0.8,             // 透明度
    draggable: true,         // 可拖拽
    riseOnHover: true        // 悬停时上浮
}).addTo(map);

// 标记事件监听
marker.on('click', function() {
   
   
    console.log('标记被点击');
});

marker.on('dragend', function(e) {
   
   
    console.log('新位置:', e.target.getLatLng());
});

1.2 标记属性操作

// 获取和设置位置
const position = marker.getLatLng();
marker.setLatLng([39.9142, 116.4174]);

// 获取和设置透明度
const opacity = marker.getOpacity();
marker.setOpacity(0.5);

// 显示/隐藏标记
marker.setOpacity(0);  // 隐藏
marker.setOpacity(1);  // 显示

// 标记状态管理
marker.options.draggable = true;
marker.dragging.enable();

二、自定义图标系统

2.1 基础图标自定义

// 创建自定义图标
const customIcon = L.icon({
   
   
    iconUrl: 'marker-icon.png',        // 图标路径
    iconSize: [32, 32],               // 图标大小
    iconAnchor: [16, 32],             // 图标锚点
    popupAnchor: [0, -32],            // 弹窗锚点
    shadowUrl: 'marker-shadow.png',   // 阴影图标
    shadowSize: [41, 41],             // 阴影大小
    shadowAnchor: [12, 40]            // 阴影锚点
});

// 使用自定义图标
const marker = L.marker([39.9042, 116.4074], {
   
   
    icon: customIcon
}).addTo(map);

2.2 动态图标生成

// 动态生成图标
function createDynamicIcon(color, size, text) {
   
   
    return L.divIcon({
   
   
        className: 'custom-marker',
        html: `
            <div style="
                background-color: ${
     
     color};
                width: ${
     
     size}px;
                height: ${
     
     size}px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-weight: bold;
                border: 2px solid white;
                box-shadow: 0 2px 4px rgba(0,0,0,0.3);
            ">
                ${
     
     text}
            </div>
        `,
        iconSize: [size, size],
        iconAnchor: [size/2, size/2]
    });
}

// 使用动态图标
const redMarker = L.marker([39.9042, 116.4074], {
   
   
    icon: createDynamicIcon('#ff0000', 30, 'A')
}).addTo(map);

const blueMarker = L.marker([39.9142, 116.4174], {
   
   
    icon: createDynamicIcon('#0000ff', 40, 'B')
}).addTo(map);

2.3 状态图标系统

// 状态图标管理器
class StatusIconManager {
   
   
    constructor() {
   
   
        this.statusIcons = {
   
   
            active: createDynamicIcon('#4CAF50', 30, '●'),
            inactive: createDynamicIcon('#9E9E9E', 30, '○'),
            warning: createDynamicIcon('#FF9800', 30, '⚠'),
            error