當(dāng)前位置：
首頁 >
Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
發(fā)布時(shí)間：2025/3/19
43
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
場景
Leaflet快速入門與加載OSM顯示地圖：
Leaflet快速入門與加載OSM顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面的基礎(chǔ)上，怎樣使用Leaflet.contextmenu插件實(shí)現(xiàn)地圖上顯示右鍵菜單效果如下
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。
實(shí)現(xiàn)
1、插件地址
GitHub - aratcliffe/Leaflet.contextmenu: A context menu for Leaflet.
2、下載源碼，引入所需要的leaflet.contextmenu.js文件和放大和縮小的圖標(biāo)文件zoom-in.png和zoom-out.png
3、修改代碼中顯示放大縮小圖片路徑地址
?4、完整示例代碼
? <!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet實(shí)現(xiàn)鼠標(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;}.leaflet-contextmenu {display: none;box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);-webkit-border-radius: 4px;border-radius: 4px;padding: 4px 0;background-color: #fff;cursor: default;-webkit-user-select: none;-moz-user-select: none;user-select: none;}.leaflet-contextmenu a.leaflet-contextmenu-item {display: block;color: #222;font-size: 12px;line-height: 20px;text-decoration: none;padding: 0 12px;border-top: 1px solid transparent;border-bottom: 1px solid transparent;cursor: default;outline: none;}.leaflet-contextmenu a.leaflet-contextmenu-item-disabled {opacity: 0.5;}.leaflet-contextmenu a.leaflet-contextmenu-item.over {background-color: #f4f4f4;border-top: 1px solid #f0f0f0;border-bottom: 1px solid #f0f0f0;}.leaflet-contextmenu a.leaflet-contextmenu-item-disabled.over {background-color: inherit;border-top: 1px solid transparent;border-bottom: 1px solid transparent;}.leaflet-contextmenu-icon {margin: 2px 8px 0 0;width: 16px;height: 16px;float: left;border: 0;}.leaflet-contextmenu-separator {border-bottom: 1px solid #ccc;margin: 5px 0;}</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" src="./js/leaflet.contextmenu.js"></script><script type="text/javascript">var map = L.map('map', {contextmenu: true,contextmenuWidth: 140,contextmenuItems: [{text: '顯示坐標(biāo)',callback: showCoordinates}, {text: '作為地圖中心',callback: centerMap}, '-', {text: '地圖放大',icon: './icon/zoom-in.png',callback: zoomIn}, {text: '地圖縮小',icon: './icon/zoom-out.png',callback: zoomOut}]}).setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);function showCoordinates(e) {alert(e.latlng);}function centerMap(e) {map.panTo(e.latlng);}function zoomIn(e) {map.zoomIn();}function zoomOut(e) {map.zoomOut();}</script> </body></html>?總結(jié)
以上是生活随笔為你收集整理的Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中使用awesome-ma
- 下一篇： Leaflet中使用leaflet-ci