场景

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

        //创建多个iconvar 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、完整代码


<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>leaflet自定义标记图标</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</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">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="OpenStreetMaphttps://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);//创建原始图标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] //弹出框弹出位置，相对于图标锚点}});//创建多个iconvar greenIcon = new LeafIcon({iconUrl: './icon/leaf-green.png'}),redIcon = new LeafIcon({iconUrl: './icon/leaf-red.png'}),orangeIcon = new LeafIcon({iconUrl: './icon/leaf-orange.png'});//创建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);</script>
</body></html>

6、效果

Leaflet中自定义marker的icon图标相关推荐

html中自定义浏览器标题栏小图标
html中自定义浏览器标题栏小图标很多的网站标题栏都会加上独特而专属的小图标,今天学习HTML进阶,刚好学到了,便来记录一下啦!!!希望和我一样的菜鸟小伙伴能够学到知识哦!!! 案例 <!DO ...
在Leaflet中自定义4490坐标系
项目背景:用leaflet中加载天地图,并采用4490坐标系问题:leaflet默认采用EPSG3857坐标系,也定义了EPSG4623坐标系,这两种坐标系比较通用,也能够满足大部分的开发需求. 鉴 ...
html中给地址栏添加icon图标
<link rel="icon" href="images/logo.ico" type="image/x-icon"/> 也可 ...
在Vue3中使用Element Plus Icon图标的几种方式
安装 Element Plus $ npm install @element-plus/icons 在main.js 引入 import * as ElIcon from '@element-plus ...
高德地图marker添加属性、更换icon图标
为高德地图marker添加属性首先创建marker //创建iconvar icon = new AMap.Icon({size: new AMap.Size(25, 34),image: '/im ...
vue在列表和下拉框中显示icon图标
vue在列表和下拉框中显示icon图标一. 在项目中引入阿里云icon图标二. 在data中定义icon图标列表三. 在下拉框中显示icon图标四. 在列表中显示icon图标五. 在el-c ...
微信小程序项目中使用icon图标
效果: 步骤: 1.先让ui负责人把你的账号加入到项目中,加入到项目中后就可以在icon图标库中看到该项目 2.在小程序中使用新建一个view,在上面加一个class,复制icon名字上去即可,注意 ...
iOS开发：设置App名称，设置App icon图标，设置App启动图
在App开发过程中,需要设置App的名字.icon图标.启动图等,也难免会遇到修改App的名字.icon图标.启动图等,下面就来谈谈这三个部分的具体设置步骤. 一.设置及修改App icon图标的步骤 ...
小程序开发中使用公共组件icon丢失问题
在父组件中调用子组件icon图标不见开始以为是自己将icon.wxss,单独放在pages,导致调用icon时公共组件无法显示,然后将icon文件夹移到根文件夹下,但是还是显示不成功,于是去子组件页 ...

Leaflet中自定义marker的icon图标

场景

实现

Leaflet中自定义marker的icon图标相关推荐

最新文章

热门文章