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

最新推荐文章于 2024-05-08 00:00:00 发布
最新推荐文章于 2024-05-08 00:00:00 发布
阅读量1k 收藏 4
点赞数
分类专栏： GIS相关 文章标签： vue.js javascript css leaflet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122414879
版权

场景

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

Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

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

注：

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

实现

1、插件地址

GitHub - lennardv2/Leaflet.awesome-markers: Colorful, iconic & retina-proof markers for Leaflet, based on the Font Awesome/Twitter Bootstrap icons.

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;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
       
        /* Marker setup */
        .awesome-marker {
            background: url('./icon/markers-soft.png') no-repeat 0 0;
            width: 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;
            width: 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>

​

霸道流氓气质
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Leaflet.awesome-markers-2.0-develop
07-23
Leaflet的彩色标志性和视网膜标记，基于Glyphicons / Font-Awesome图标 Leaflet.awesome-markers的2.0版测试用： Bootstrap 3 Font Awesome 4.0 Ionicons 1.5.2 Leaflet 0.5-Lastest 对于bootstrap 2.x和Fontawesome 3.x使用Leaflet.awesome-markers v1.0
Leaflet学习笔记-Leaflet.awesome-markers
anzanli2393的博客
11-06 421
基础篇传送门 http://www.cnblogs.com/CoffeeEddy/p/4919987.html 效果图 是不是感觉很美观啊 为什么选择awesome 地图上面需要各种各样的Mark,难道要我们一个个去画？ 这个网站就有海量的图标,并且最近有中文的镜像网站（貌似我一开始用的时候还没有...） 优点：免费（这个很重要~）、一个字体库585个图标、...
Leaflet 入门教程（七）：markers 篇
最新发布
大剑师兰特的GIS世界
05-08 1227
在Leaflet中，`Markers`（标记）是最基本的图元之一，用于在地图上的特定坐标位置显示信息或图标。。
前端项目-Leaflet.awesome-markers.zip
09-03
前端项目-Leaflet.awesome-markers,传单的彩色标志和防视网膜标记，基于字形图标/字体-棒极了的图标
在leaflet中eaflet.awesome-markers需要关联的js库
cuisidong1997的博客
04-19 238
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.3.4/dist/leaflet.js"></script> <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script> <script sr...
Leaflet官方教程（三）——Markers With Custom Icons
不平凡之路
05-28 4521
Markers With Custom Icons这个教程中，将在marker中使用自定义的图标。Preparing the images为了制作常用的图标，我们通常需要二张图片，一张真实图片一张投影图片。下面我们利用树叶图片来举例：注意：图片空白部分要是透明的。Creating an iconleaflet中marker的图标是由L.Icon事件来定义的，我们可以在创建marker时传入选项：下...
g-leaflet-awesome-markers:Leaflet.awesome-markers插件的GWT包装器
05-30
Font Awesome是一个广泛使用的矢量图标库，提供了大量的图标供开发者选择，通过g-leaflet-awesome-markers，这些图标可以直接在GWT环境中使用。 在使用g-leaflet-awesome-markers时，开发者需要先在项目中引入g-...
Leaflet.Canvas-Markers-0.2.0
04-22
在实际应用中，开发者可以通过以下步骤使用Leaflet.Canvas-Markers： 1. 引入库：首先需要在HTML文件中引入Leaflet库和Canvas-Markers插件的JS文件。 2. 创建地图：初始化一个Leaflet地图，并设置合适的视口。 3. ...
leaflet-markers-canvas:一个 Leaflet 插件，用于在画布而不是 DOM 中渲染许多标记
05-30
安装从 npm 安装： npm i leaflet-markers-canvas 或下载例子 var map = L . map ( "map" ) . setView ( [ 59.9578 , 30.2987 ] , 10 ) ;var tiles = L . tileLayer ( "http://{s}.tile.osm.org/{z}/{x}/{y}.png" , ...
leaflet-color-markers:标准传单标记的颜色变化
04-13
传单颜色标记 标准传单标记的颜色变化： 颜色 标记2x 记号笔 内部颜色 ... iconUrl : 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png' ,
【WebGIS】leaflet入门-自定义MarkerIcon
paperperson的博客
04-28 2350
听着，所谓Marker，就是标记的意思，一般用于在地图上标记某些事物。如果是一个普通的标记的话，在上一节其实已经示范过了，就长下面这样毫无特色！我们的目标是下面这样L.icon官方的自定义icon的代码如下iconSize: [38, 95], // icon的大小shadowSize: [50, 64], // 阴影的大小iconAnchor: [22, 94], // icon的渲染的位置（相对与marker）
点击marker改变icon，点击另外的marker，上一次点击的marker还原
X小飞侠的博客
01-08 3943
完整的代码： package map; import java.util.ArrayList; import java.util.List; import map.entities.Parent; import android.app.Activity; import android.graphics.Point; import android.os.AsyncTask; import an
leaflet加载接入高德、openstreetmap、google地图（leaflet篇.3）
地图之家
05-17 7897
完整代码文件在文章末尾处提供 对接效果图如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Historic Topographic Maps</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
leaflet marker设置及根据zoom改变样式
Bruce_byan的博客
12-16 3161
1.获取数据 queryData(){//调用接口查询城市数据 let params={time:this.selectedTime,type:this.timeType}; Promise.all([getAllCityAirMoniListOnChina(params), getAllSiteAirMoniListOnChina(params)]).then(res => { if (res[0].success&& res[1].succe
leaflet给自定义marker添加动态效果
氵冫、的博客
11-03 5820
自定义marker的动态效果
高德地图 - 点击改变当前 marker 图标（marker点击切换 icon 上一个 icon 恢复原样）
grootbaby
04-19 9429
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高德地图 - 点击改变当前marker图标</title> <link rel="shortcut icon" href="#" /> &lt...
关于地图marker点击切换icon以及上一个icon恢复原样
qq_21895591的博客
01-05 3682
131：vue+leaflet实现波动的marker效果
大剑师兰特的GIS世界
04-07 1275
第131个本示例的目的是介绍如何在vue+leaflet中显示波动的marker效果。
百度地图marker点击切换icon
m0_60023662的博客
07-14 591
项目使用vue做的，直接上代码 //引入的图标 import iconCar from "../assets/icon_yongyou_green.gif"; import iconCars from "../assets/icon_yongyou_red.gif"; import iconclick from "../assets/yellow.gif"; import underline from "../assets/underline.png"; baiduMap() {...
vue2中使用leaflet-smooth-marker-transition
05-30
在Vue2中使用leaflet-smooth-marker-transition，你需要先安装leaflet和leaflet-smooth-marker-transition插件，可以使用以下命令： ``` npm install leaflet npm install leaflet-smooth-marker-transition ``` 然后在Vue组件中引入leaflet和leaflet-smooth-marker-transition： ```javascript import L from 'leaflet'; import 'leaflet-smooth-marker-transition'; ``` 接下来你可以在Vue组件的mounted钩子中初始化地图和标记，并使用leaflet-smooth-marker-transition来实现平滑过渡的标记动画效果，例如： ```javascript mounted() { // 初始化地图 this.map = L.map('map').setView([51.505, -0.09], 13); // 添加标记 this.marker = L.marker([51.5, -0.09]).addTo(this.map); // 添加平滑过渡动画 this.marker.smoothMove({ duration: '5000ms', keepAtCenter: true }); } ``` 这样就可以在Vue2中使用leaflet-smooth-marker-transition插件实现平滑过渡的标记动画效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值