Leaflet中使用awesome-markers插件显示带图标的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中

3、完整示例代码


"en">


    "UTF-8">
    leaflet显示带awesome的marker图标
    "stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    "http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
    "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    



    "map">

GIS相关

Leaflet中使用awesome-markers插件显示带图标的marker

场景

实现

相关

GIS相关数据源

标签