Leaflet中自定义marker的icon图标

场景

Leaflet中添加标记、折线、圆圈、多边形、弹窗显示点击处坐标：

Leaflet中添加标记、折线、圆圈、多边形、弹窗显示点击处坐标_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面加载标记使用的是默认图标，如果要自定义图标怎么用。

官网有详细的教程

Markers With Custom Icons - Leaflet - a JavaScript library for interactive maps

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、与官方教程一样，准备一张阴影照片，三张不同颜色的icon

2、创建ICON构造函数，相当于继承ICON，可以重新设置属性

        //创建ICON构造函数，相当于继承于ICON，可以重新设置属性
        var LeafIcon = L.Icon.extend({
            options: {
                shadowUrl: './icon/leaf-shadow.png', //阴影地址
                iconSize: [38, 95],  //图标宽高
                shadowSize: [50, 64], //阴影宽高
                iconAnchor: [22, 94], //图标锚点
                shadowAnchor: [4, 62], //阴影锚点
                popupAnchor: [-3, -76] //弹出框弹出位置，相对于图标锚点
            }
        });

3、创建多个icon

        //创建多个icon
        var greenIcon = new LeafIcon({
                iconUrl: './icon/leaf-green.png'
            }),
            redIcon = new LeafIcon({
                iconUrl: './icon/leaf-red.png'
            }),
            orangeIcon = new LeafIcon({
                iconUrl: './icon/leaf-orange.png'
            });

4、创建marker添加到地图上

        //创建marker添加到地图上
        L.marker([36.09, 120.35], {
            icon: greenIcon
        }).bindPopup("I am a green leaf.").addTo(map);
        L.marker([36.13, 120.25], {
            icon: redIcon
        }).bindPopup("I am a red leaf.").addTo(map);
        L.marker([36.16, 120.15], {
            icon: orangeIcon
        }).bindPopup("I am an orange leaf.").addTo(map);

5、完整代码

​




    
    
    
    



    

    
    




​

6、效果