Leaflet中使用awesomemarkers插件显示带图标的marker

场景

Vue+Leaflet实现加载OSM显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394

在上面的基础上，实现Marker上带图标的效果。

 注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、插件地址

https://github.com/lennardv2/Leaflet.awesome-markers

2、下载源码，引入所需要的文件

引入这四个png，以及核心js文件leaflet.awesome-marker.js

css文件不再单独引入，直接写在html中

2、修改css文件中图片的路径

3、完整示例代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>leaflet显示带awesome的marker图标</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
             100%;
            height: 100%;
            overflow: hidden;
        }
       
        /* Marker setup */
        .awesome-marker {
            background: url('./icon/markers-soft.png') no-repeat 0 0;
             35px;
            height: 46px;
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            text-align: center;
        }

        .awesome-marker-shadow {
            background: url('./icon/markers-shadow.png') no-repeat 0 0;
             36px;
            height: 16px;
        }

        /* Retina displays */
        @media (min--moz-device-pixel-ratio: 1.5),
        (-o-min-device-pixel-ratio: 3/2),
        (-webkit-min-device-pixel-ratio: 1.5),
        (min-device-pixel-ratio: 1.5),
        (min-resolution: 1.5dppx) {
            .awesome-marker {
                background-image: url('./icon/markers-soft@2x.png');
                background-size: 720px 46px;
            }

            .awesome-marker-shadow {
                background-image: url('./icon/markers-shadow@2x.png');
                background-size: 35px 16px;
            }
        }

        .awesome-marker i {
            color: #333;
            margin-top: 10px;
            display: inline-block;
            font-size: 14px;
        }

        .awesome-marker .icon-white {
            color: #fff;
        }

        /* Colors */
        .awesome-marker-icon-red {
            background-position: 0 0;
        }

        .awesome-marker-icon-darkred {
            background-position: -180px 0;
        }

        .awesome-marker-icon-lightred {
            background-position: -360px 0;
        }

        .awesome-marker-icon-orange {
            background-position: -36px 0;
        }

        .awesome-marker-icon-beige {
            background-position: -396px 0;
        }

        .awesome-marker-icon-green {
            background-position: -72px 0;
        }

        .awesome-marker-icon-darkgreen {
            background-position: -252px 0;
        }

        .awesome-marker-icon-lightgreen {
            background-position: -432px 0;
        }

        .awesome-marker-icon-blue {
            background-position: -108px 0;
        }

        .awesome-marker-icon-darkblue {
            background-position: -216px 0;
        }

        .awesome-marker-icon-lightblue {
            background-position: -468px 0;
        }

        .awesome-marker-icon-purple {
            background-position: -144px 0;
        }

        .awesome-marker-icon-darkpurple {
            background-position: -288px 0;
        }

        .awesome-marker-icon-pink {
            background-position: -504px 0;
        }

        .awesome-marker-icon-cadetblue {
            background-position: -324px 0;
        }

        .awesome-marker-icon-white {
            background-position: -574px 0;
        }

        .awesome-marker-icon-gray {
            background-position: -648px 0;
        }

        .awesome-marker-icon-lightgray {
            background-position: -612px 0;
        }

        .awesome-marker-icon-black {
            background-position: -682px 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript" src="./js/leaflet.awesome-markers.js"></script>
    <script type="text/javascript">
        var map = L.map('map').setView([36.09, 120.35], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: ''
        }).addTo(map);

        L.marker([51.941196, 4.512291], {
            icon: L.AwesomeMarkers.icon({
                icon: 'link',
                prefix: 'glyphicon',
                markerColor: 'red',
                spin: true
            })
        }).addTo(map);
        L.marker([51.927913, 4.521303], {
            icon: L.AwesomeMarkers.icon({
                icon: 'certificate',
                prefix: 'glyphicon',
                markerColor: 'red'
            })
        }).addTo(map);
        L.marker([51.936063, 4.502077], {
            icon: L.AwesomeMarkers.icon({
                icon: 'cog',
                prefix: 'glyphicon',
                markerColor: 'purple'
            })
        }).addTo(map);
        L.marker([51.932835, 4.506969], {
            icon: L.AwesomeMarkers.icon({
                icon: 'send',
                prefix: 'glyphicon',
                markerColor: 'green'
            })
        }).addTo(map);
        L.marker([51.930295, 4.515209], {
            icon: L.AwesomeMarkers.icon({
                icon: 'star',
                prefix: 'glyphicon',
                markerColor: 'blue',
                iconColor: 'black'
            })
        }).addTo(map);
        L.marker([51.930083, 4.507742], {
            icon: L.AwesomeMarkers.icon({
                icon: 'tags',
                prefix: 'fa',
                markerColor: 'orange'
            })
        }).addTo(map);

        L.marker([51.930454, 4.527054], {
            icon: L.AwesomeMarkers.icon({
                icon: 'bookmark',
                prefix: 'fa',
                markerColor: 'darkred'
            })
        }).addTo(map);
        L.marker([51.929607, 4.527054], {
            icon: L.AwesomeMarkers.icon({
                icon: 'picture-o',
                prefix: 'fa',
                markerColor: 'darkblue'
            })
        }).addTo(map);
        L.marker([51.928919, 4.528856], {
            icon: L.AwesomeMarkers.icon({
                icon: 'move',
                prefix: 'fa',
                markerColor: 'cadetblue'
            })
        }).addTo(map);
        L.marker([51.930295, 4.530745], {
            icon: L.AwesomeMarkers.icon({
                icon: 'play',
                prefix: 'fa',
                markerColor: 'darkpurple'
            })
        }).addTo(map);
        L.marker([51.925055, 4.512806], {
            icon: L.AwesomeMarkers.icon({
                icon: 'barcode',
                prefix: 'fa',
                markerColor: 'darkgreen'
            })
        }).addTo(map);
        L.marker([51.925902, 4.505768], {
            icon: L.AwesomeMarkers.icon({
                icon: 'inbox',
                prefix: 'fa',
                markerColor: 'darkblue'
            })
        }).addTo(map);
                L.marker([51.925902, 4.505768], {
            icon: L.AwesomeMarkers.icon({
                icon: 'inbox',
                prefix: 'fa',
                markerColor: 'darkblue'
            })
        }).addTo(map);
    </script>
</body>

</html>
博客园： https://www.cnblogs.com/badaoliumangqizhi/ 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/badaoliumangqizhi/p/15785227.html