當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Leaflet中自定义marker的icon图标

發(fā)布時(shí)間：2025/3/19 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Leaflet中自定义marker的icon图标小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

場景

Leaflet中添加標(biāo)記、折線、圓圈、多邊形、彈窗顯示點(diǎn)擊處坐標(biāo)：

Leaflet中添加標(biāo)記、折線、圓圈、多邊形、彈窗顯示點(diǎn)擊處坐標(biāo)_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面加載標(biāo)記使用的是默認(rèn)圖標(biāo)，如果要自定義圖標(biāo)怎么用。

官網(wǎng)有詳細(xì)的教程

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

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

1、與官方教程一樣，準(zhǔn)備一張陰影照片，三張不同顏色的icon

2、創(chuàng)建ICON構(gòu)造函數(shù)，相當(dāng)于繼承ICON，可以重新設(shè)置屬性

??????? //創(chuàng)建ICON構(gòu)造函數(shù)，相當(dāng)于繼承于ICON，可以重新設(shè)置屬性var LeafIcon = L.Icon.extend({options: {shadowUrl: './icon/leaf-shadow.png', //陰影地址iconSize: [38, 95],? //圖標(biāo)寬高shadowSize: [50, 64], //陰影寬高iconAnchor: [22, 94], //圖標(biāo)錨點(diǎn)shadowAnchor: [4, 62], //陰影錨點(diǎn)popupAnchor: [-3, -76] //彈出框彈出位置，相對于圖標(biāo)錨點(diǎn)}});

3、創(chuàng)建多個(gè)icon

??????? //創(chuàng)建多個(gè)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、創(chuàng)建marker添加到地圖上

??????? //創(chuàng)建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自定義標(biāo)記圖標(biāo)</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: '© <a href="OpenStreetMaphttps://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);//創(chuàng)建原始圖標(biāo)ICON//創(chuàng)建ICON構(gòu)造函數(shù)，相當(dāng)于繼承于ICON，可以重新設(shè)置屬性var LeafIcon = L.Icon.extend({options: {shadowUrl: './icon/leaf-shadow.png', //陰影地址iconSize: [38, 95],? //圖標(biāo)寬高shadowSize: [50, 64], //陰影寬高iconAnchor: [22, 94], //圖標(biāo)錨點(diǎn)shadowAnchor: [4, 62], //陰影錨點(diǎn)popupAnchor: [-3, -76] //彈出框彈出位置，相對于圖標(biāo)錨點(diǎn)}});//創(chuàng)建多個(gè)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'});//創(chuàng)建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、效果

總結(jié)

以上是生活随笔為你收集整理的Leaflet中自定义marker的icon图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Vue+Leaflet-side-by-
下一篇： Leaflet中使用layerGroup