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

前言：标记和弹窗是地图应用的核心功能。本文将深入讲解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: createDynamicIcon('#F44336', 30, '✕')
        };
    }
    
    getIcon(status) {
        return this.statusIcons[status] || this.statusIcons.inactive;
    }
    
    updateMarkerStatus(marker, newStatus) {
        marker.setIcon(this.getIcon(newStatus));
    }
}

// 使用状态图标
const iconManager = new StatusIconManager();
const statusMarker = L.marker([39.9042, 116.4074], {
    icon: iconManager.getIcon('active')
}).addTo(map);

// 更新状态
iconManager.updateMarkerStatus(statusMarker, 'warning');

三、弹窗系统详解

3.1 基础弹窗实现

// 简单文本弹窗
marker.bindPopup('这是一个简单的弹窗');

// HTML弹窗
marker.bindPopup(`
    <div style="min-width: 200px;">
        <h3>天安门</h3>
        <p>地址：北京市东城区</p>
        <p>类型：历史建筑</p>
        <button onclick="alert('详情按钮被点击')">查看详情</button>
    </div>
`);

// 弹窗配置
marker.bindPopup('弹窗内容', {
    maxWidth: 300,           // 最大宽度
    minWidth: 200,           // 最小宽度
    maxHeight: 400,           // 最大高度
    autoPan: true,           // 自动平移
    keepInView: true,        // 保持在视野内
    closeButton: true,       // 关闭按钮
    autoClose: true,         // 自动关闭
    closeOnClick: false      // 点击关闭
});

3.2 动态弹窗内容

// 动态弹窗生成器
class DynamicPopup {
    constructor(data) {
        this.data = data;
    }
    
    generateContent() {
        return `
            <div class="popup-content">
                <h3>${this.data.name}</h3>
                <p><strong>地址：</strong>${this.data.address}</p>
                <p><strong>类型：</strong>${this.data.type}</p>
                <p><strong>评分：</strong>${this.generateStars(this.data.rating)}</p>
                <div class="popup-actions">
                    <button onclick="this.showDetails('${this.data.id}')">详情</button>
                    <button onclick="this.navigate('${this.data.id}')">导航</button>
                </div>
            </div>
        `;
    }
    
    generateStars(rating) {
        const fullStars = Math.floor(rating);
        const hasHalfStar = rating % 1 !== 0;
        let stars = '★'.repeat(fullStars);
        if (hasHalfStar) stars += '☆';
        return stars;
    }
}

// 使用动态弹窗
const popupData = {
    id: '001',
    name: '故宫博物院',
    address: '北京市东城区景山前街4号',
    type: '博物馆',
    rating: 4.5
};

const dynamicPopup = new DynamicPopup(popupData);
marker.bindPopup(dynamicPopup.generateContent());

3.3 弹窗事件处理

// 弹窗事件监听
marker.on('popupopen', function(e) {
    console.log('弹窗打开');
    // 可以在这里加载动态内容
});

marker.on('popupclose', function(e) {
    console.log('弹窗关闭');
    // 清理资源
});

// 弹窗内容更新
function updatePopupContent(marker, newContent) {
    marker.setPopupContent(newContent);
    marker.openPopup();
}

// 弹窗位置调整
marker.on('popupopen', function(e) {
    const popup = e.popup;
    const map = marker._map;
    
    // 确保弹窗在视野内
    if (!map.getBounds().contains(popup.getLatLng())) {
        map.panTo(marker.getLatLng());
    }
});

四、高级标记功能

4.1 标记聚合系统

// 标记聚合实现
class MarkerCluster {
    constructor(map, markers, options = {}) {
        this.map = map;
        this.markers = markers;
        this.options = {
            maxClusterRadius: 50,
            minClusterSize: 2,
            ...options
        };
        this.clusters = [];
    }
    
    // 创建聚合
    createClusters() {
        this.clusters = [];
        const processed = new Set();
        
        for (const marker of this.markers) {
            if (processed.has(marker)) continue;
            
            const cluster = this.findNearbyMarkers(marker, processed);
            this.clusters.push(cluster);
        }
        
        this.renderClusters();
    }
    
    // 查找附近标记
    findNearbyMarkers(marker, processed) {
        const cluster = [marker];
        processed.add(marker);
        
        for (const otherMarker of this.markers) {
            if (processed.has(otherMarker)) continue;
            
            const distance = marker.getLatLng().distanceTo(otherMarker.getLatLng());
            if (distance <= this.options.maxClusterRadius) {
                cluster.push(otherMarker);
                processed.add(otherMarker);
            }
        }
        
        return cluster;
    }
    
    // 渲染聚合
    renderClusters() {
        for (const cluster of this.clusters) {
            if (cluster.length === 1) {
                cluster[0].addTo(this.map);
            } else {
                const center = this.getClusterCenter(cluster);
                const clusterMarker = L.marker(center, {
                    icon: this.createClusterIcon(cluster.length)
                });
                
                clusterMarker.bindPopup(this.createClusterPopup(cluster));
                clusterMarker.addTo(this.map);
            }
        }
    }
    
    // 获取聚合中心
    getClusterCenter(cluster) {
        let totalLat = 0, totalLng = 0;
        cluster.forEach(marker => {
            const pos = marker.getLatLng();
            totalLat += pos.lat;
            totalLng += pos.lng;
        });
        return [totalLat / cluster.length, totalLng / cluster.length];
    }
    
    // 创建聚合图标
    createClusterIcon(count) {
        return L.divIcon({
            className: 'cluster-marker',
            html: `
                <div style="
                    background-color: #4CAF50;
                    color: white;
                    border-radius: 50%;
                    width: 40px;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: bold;
                    border: 2px solid white;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
                ">
                    ${count}
                </div>
            `,
            iconSize: [40, 40],
            iconAnchor: [20, 20]
        });
    }
    
    // 创建聚合弹窗
    createClusterPopup(cluster) {
        const content = cluster.map(marker => 
            `<div>${marker.options.title || '未命名标记'}</div>`
        ).join('');
        
        return `
            <div>
                <h4>聚合点 (${cluster.length}个)</h4>
                ${content}
            </div>
        `;
    }
}

4.2 标记搜索与筛选

// 标记搜索系统
class MarkerSearch {
    constructor(markers) {
        this.markers = markers;
        this.filteredMarkers = [...markers];
    }
    
    // 按名称搜索
    searchByName(query) {
        this.filteredMarkers = this.markers.filter(marker => {
            const title = marker.options.title || '';
            return title.toLowerCase().includes(query.toLowerCase());
        });
        return this.filteredMarkers;
    }
    
    // 按位置筛选
    filterByLocation(bounds) {
        this.filteredMarkers = this.markers.filter(marker => {
            return bounds.contains(marker.getLatLng());
        });
        return this.filteredMarkers;
    }
    
    // 按距离筛选
    filterByDistance(center, maxDistance) {
        this.filteredMarkers = this.markers.filter(marker => {
            const distance = center.distanceTo(marker.getLatLng());
            return distance <= maxDistance;
        });
        return this.filteredMarkers;
    }
    
    // 显示筛选结果
    showFilteredMarkers() {
        // 隐藏所有标记
        this.markers.forEach(marker => marker.setOpacity(0));
        
        // 显示筛选结果
        this.filteredMarkers.forEach(marker => marker.setOpacity(1));
    }
}

// 使用搜索系统
const searchSystem = new MarkerSearch(markers);
const results = searchSystem.searchByName('天安门');
searchSystem.showFilteredMarkers();

五、弹窗样式定制

5.1 CSS样式定义

/* 弹窗样式定制 */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.leaflet-popup-content {
    margin: 12px;
    line-height: 1.4;
}

.popup-content {
    min-width: 200px;
}

.popup-content h3 {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 16px;
}

.popup-content p {
    margin: 4px 0;
    color: #666;
    font-size: 14px;
}

.popup-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.popup-actions button {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    font-size: 12px;
}

.popup-actions button:hover {
    background-color: #0056b3;
}

/* 聚合标记样式 */
.cluster-marker {
    background-color: #4CAF50;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

5.2 响应式弹窗

// 响应式弹窗系统
class ResponsivePopup {
    constructor(marker, content) {
        this.marker = marker;
        this.content = content;
        this.setupResponsivePopup();
    }
    
    setupResponsivePopup() {
        this.marker.bindPopup(this.content, {
            maxWidth: this.getMaxWidth(),
            className: 'responsive-popup'
        });
        
        // 监听窗口大小变化
        window.addEventListener('resize', () => {
            this.updatePopupSize();
        });
    }
    
    getMaxWidth() {
        const width = window.innerWidth;
        if (width < 768) return 250;      // 移动端
        if (width < 1024) return 300;     // 平板
        return 400;                       // 桌面端
    }
    
    updatePopupSize() {
        const popup = this.marker.getPopup();
        if (popup.isOpen()) {
            popup.setContent(this.content);
        }
    }
}

// 使用响应式弹窗
const responsivePopup = new ResponsivePopup(marker, popupContent);

六、实战案例：智能标记系统

// 完整的智能标记系统
class SmartMarkerSystem {
    constructor(map) {
        this.map = map;
        this.markers = [];
        this.clusterManager = null;
        this.searchSystem = null;
    }
    
    // 添加标记
    addMarker(lat, lng, data) {
        const marker = L.marker([lat, lng], {
            title: data.name,
            data: data
        });
        
        // 绑定弹窗
        marker.bindPopup(this.createPopupContent(data));
        
        // 添加事件监听
        marker.on('click', () => this.onMarkerClick(marker));
        
        this.markers.push(marker);
        marker.addTo(this.map);
        
        return marker;
    }
    
    // 创建弹窗内容
    createPopupContent(data) {
        return `
            <div class="smart-popup">
                <h3>${data.name}</h3>
                <p>${data.description}</p>
                <div class="popup-actions">
                    <button onclick="this.showDetails('${data.id}')">详情</button>
                    <button onclick="this.navigate('${data.id}')">导航</button>
                </div>
            </div>
        `;
    }
    
    // 标记点击事件
    onMarkerClick(marker) {
        console.log('标记被点击:', marker.options.data);
        // 可以在这里添加自定义逻辑
    }
    
    // 启用聚合
    enableClustering(options = {}) {
        this.clusterManager = new MarkerCluster(this.map, this.markers, options);
        this.clusterManager.createClusters();
    }
    
    // 启用搜索
    enableSearch() {
        this.searchSystem = new MarkerSearch(this.markers);
    }
    
    // 搜索标记
    searchMarkers(query) {
        if (this.searchSystem) {
            return this.searchSystem.searchByName(query);
        }
        return [];
    }
}

// 使用智能标记系统
const smartMarkers = new SmartMarkerSystem(map);

// 添加一些标记
smartMarkers.addMarker(39.9042, 116.4074, {
    id: '001',
    name: '天安门',
    description: '中华人民共和国首都北京的中心'
});

smartMarkers.addMarker(39.9142, 116.4174, {
    id: '002',
    name: '故宫',
    description: '明清两朝的皇家宫殿'
});

// 启用聚合和搜索
smartMarkers.enableClustering();
smartMarkers.enableSearch();

七、常见问题与解决方案

7.1 标记不显示

// 问题：标记添加后不显示
// 解决方案：检查坐标和地图初始化
if (map && map.getContainer()) {
    marker.addTo(map);
} else {
    console.error('地图未正确初始化');
}

7.2 弹窗样式问题

// 问题：弹窗样式不生效
// 解决方案：使用自定义CSS类
marker.bindPopup(content, {
    className: 'custom-popup'
});

7.3 性能问题

// 问题：大量标记导致性能问题
// 解决方案：使用聚合和分页
const clusterManager = new MarkerCluster(map, markers, {
    maxClusterRadius: 50,
    minClusterSize: 2
});

八、总结与最佳实践

8.1 核心要点

• ✅ 标记创建：掌握基础标记和自定义图标
• ✅ 弹窗系统：实现静态和动态弹窗内容
• ✅ 聚合功能：处理大量标记的性能优化
• ✅ 搜索筛选：提供用户友好的交互体验

8.2 最佳实践建议

1. 图标设计：使用清晰的图标，考虑不同设备的分辨率
2. 弹窗内容：保持内容简洁，避免过长的文本
3. 性能优化：大量标记时使用聚合功能
4. 用户体验：提供搜索和筛选功能

---

相关推荐：

• Leaflet标记API文档
• 图标设计最佳实践
• 地图性能优化指南

如果这篇文章对你有帮助，请点赞👍、收藏⭐、关注👆，你的支持是我创作的动力！