Leaflet在marker中添加数字

Leaflet是一个轻量级的JavaScript库，用于创建交互式的在线地图。要在Leaflet标记器（Marker）上添加数字，你可以结合HTML元素（如`<div>`）和CSS样式来实现。以下是一般步骤：

1. 创建一个Marker：

var marker = L.marker([lat, lng]).addTo(map);

2. 创建一个包含数字的自定义图标（可以是HTML+CSS）：

<div class="marker-number">
    <span class="number-value">0</span>
</div>

.marker-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px; /* 根据需要调整大小 */
}
.number-value {
    background-color: white;
    border-radius: 50%;
    padding: 5px;
}

3. 将这个自定义图标替换为默认图标：

marker.setIcon(L.divIcon({
    iconAnchor: [0, 0], // 设置图标中心点
    html: '<div class="marker-number"><span class="number-value">0</span></div>', // 使用自定义HTML
}));

4. 如果你需要动态更新数字，可以在适当的时候更改`.number-value`的文本内容：

marker.on('click', function() {
    var numberValue = document.querySelector('.marker-number .number-value');
    numberValue.textContent = '新的数字';
});