Leaflet中自定义marker的icon图标
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中自定义marker的icon图标
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
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: '© <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图标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue+Leaflet-side-by-
- 下一篇： Leaflet中使用layerGroup