Leaflet中添加标记、折线、圆圈、多边形、弹窗显示点击处坐标
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中添加标记、折线、圆圈、多边形、弹窗显示点击处坐标
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Leaflet快速入門與加載OSM顯示地圖：
Leaflet快速入門與加載OSM顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面加載顯示地圖的基礎上，怎樣實現添加標記、折線、圓形、多邊形等。
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、添加標記
??????? //添加一個標記L.marker([36.09, 120.35]).addTo(map).bindPopup("公眾號:霸道的程序猿<br>").openPopup();效果
2、添加折線
??????? //添加一條折線var polyline = L.polyline([[36.1, 120.32],[36.05, 120.3]],{color: '#FFFF00'}).addTo(map).bindPopup("這是折線");效果
3、添加圓圈
??????? //添加一個圓圈L.circle([36.01, 120.22], 5000, {color: 'red',fillColor: '#f03',fillOpacity: 0.5}).addTo(map).bindPopup("青島歡迎你");效果
4、添加多邊形
??????? //添加一個多邊形L.polygon([[39.92096, 116.38591],[39.91079, 116.38676],[39.91118, 116.3962],[39.92014, 116.39482]]).addTo(map).bindPopup("故宮");效果
5、點擊地圖彈窗顯示坐標
??????? //彈窗顯示點擊處的坐標var popup = L.popup();function onMapClick(e) {popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(map);}map.on('click', onMapClick);效果
6、完整代碼
? <!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);//添加一個標記L.marker([36.09, 120.35]).addTo(map).bindPopup("公眾號:霸道的程序猿<br>").openPopup();//添加一個圓圈L.circle([36.01, 120.22], 5000, {color: 'red',fillColor: '#f03',fillOpacity: 0.5}).addTo(map).bindPopup("青島歡迎你");//添加一個多邊形L.polygon([[39.92096, 116.38591],[39.91079, 116.38676],[39.91118, 116.3962],[39.92014, 116.39482]]).addTo(map).bindPopup("故宮");//添加一條折線var polyline = L.polyline([[36.1, 120.32],[36.05, 120.3]],{color: '#FFFF00'}).addTo(map).bindPopup("這是折線");//彈窗顯示點擊處的坐標var popup = L.popup();function onMapClick(e) {popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(map);}map.on('click', onMapClick);</script> </body></html>?總結
以上是生活随笔為你收集整理的Leaflet中添加标记、折线、圆圈、多边形、弹窗显示点击处坐标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet快速入门与加载OSM显示地
- 下一篇： Leaflet中加载Geoserver发