Leaflet中新增標註和popup,並且點選時彈窗顯示圖片
阿新 • • 發佈：2022-04-08
場景
Leaflet中自定義marker的icon圖示：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122322788
在上面自定義marker的基礎之外，還可以通過給marker新增popup彈窗
並設定popup的content達到自定義彈窗內容的效果。
注：
部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。
實現
1、新增圖片標註
//新增圖片標註 var Marker = L.marker([36.09, 120.35]).addTo(map);
2、設定點選事件
Marker.on('click', function () { //新增Popup標註，顯示一段文字和一幅圖片 var popup = L.popup().setLatLng([36.09, 120.35]).setContent('<div style="width:268px;font-size:16px">小區一隅，您可以在此盡享美好時光...</div> <img style="width:268px;" src="./images/timg.jpg" />').openOn(map); });
3、完整示例程式碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>leaflet新增標註popup</title> <link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/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: '' }).addTo(map); //新增圖片標註 var Marker = L.marker([36.09, 120.35]).addTo(map); /**滑鼠單擊事件 * @param {string} type 事件型別（滑鼠單擊） * @param {function} fn 事件觸發後的響應函式 */ Marker.on('click', function () { //新增Popup標註，顯示一段文字和一幅圖片 var popup = L.popup().setLatLng([36.09, 120.35]).setContent('<div style="width:268px;font-size:16px">小區一隅，您可以在此盡享美好時光...</div> <img style="width:268px;" src="./images/timg.jpg" />').openOn(map); }); </script> </body> </html>