jQuery 修改 leaflet marker icon

在本文中，我们将介绍如何使用jQuery来修改leaflet地图中的标记图标（marker icon）。

什么是leaflet和marker icon？

Leaflet是一个开源的JavaScript库，用于创建交互式地图。它提供了许多地图功能，包括添加标记（marker）、绘制折线（polyline）和多边形（polygon）、缩放和平移地图等。

Marker icon指的是在地图上显示的标记的图标。Leaflet提供了一些默认的图标供我们使用，但有时我们可能需要根据具体的需求来修改标记的图标。

使用jQuery修改leaflet marker icon

要修改leaflet marker icon，我们需要使用jQuery库以及Leaflet库。首先，我们需要在HTML文件中引入这两个库：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.css"/>
<script src="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.js"></script>

接下来，我们可以创建一个leaflet地图：

<div id="map" style="width: 600px; height: 400px;"></div>

<script>
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);
</script>

在地图上添加一个marker并修改其icon：

<script>
    var greenIcon = L.icon({
        iconUrl: 'leaf-green.png',
        iconSize: [38, 95],
        iconAnchor: [22, 94],
        popupAnchor: [-3, -76],
    });

    var marker = L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
</script>

在上面的代码中，我们使用了L.icon方法来创建一个新的图标，然后通过L.marker的icon选项将该图标应用到marker上。

示例说明

在上面的示例中，我们使用了一个名为’leaf-green.png’的图片作为标记的图标。你可以使用任何合适的图片来代替它，只需将其路径替换成你的图片路径，并根据图片的实际大小调整iconSize和iconAnchor属性。

此外，我们还可以使用CSS样式来修改marker的图标，例如改变图标的颜色、大小或者添加动画效果。以下是一个使用CSS样式修改marker图标的示例：

<script>
    var cssIcon = L.divIcon({
        className: 'custom-icon',
        html: '<div class="icon"></div>',
        iconSize: [38, 38]
    });

    var marker = L.marker([51.5, -0.09], {icon: cssIcon}).addTo(map);
</script>

<style>
    .custom-icon .icon {
        background-color: red;
        width: 24px;
        height: 24px;
        border-radius: 50%;
    }
</style>

在上面的示例中，我们使用L.divIcon方法创建一个自定义的图标，并使用CSS样式修改图标的背景色、大小和形状。