Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单

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



    

    
    
    
        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();
        }