场景

Leaflet快速入门与加载OSM显示地图：

Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基础上，怎样使用Leaflet.contextmenu插件实现地图上显示右键菜单效果如下

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、插件地址

GitHub – aratcliffe/Leaflet.contextmenu: A context menu for Leaflet.

2、下载源码，引入所需要的leaflet.contextmenu.js文件和放大和缩小的图标文件zoom-in.png和zoom-out.png

3、修改代码中显示放大缩小图片路径地址

4、完整示例代码


<!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;
        }

        .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: '显示坐标',
                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>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136108.html