右键菜单 最后更新时间: 2023年03月27日

地图图面一种特殊的信息窗体，即右键菜单。AMap.ContextMenu 类提供图面添加右键菜单的方式。

准备

右键菜单 ContextMenu

具体使用方式如下：

const map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],  //设置地图中心点坐标
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D'  //设置地图模式
});

// 菜单内容
var content = [
    '<div class="context-menu-content">',
        '<ul class='context_menu'>',
            '<li onclick='menu.zoomMenu(0)'>缩小</li>',
            '<li class='split_line' onclick='menu.zoomMenu(1)'>放大</li>',
            '</ul>'
    '</div>'
];

var contextMenu = new AMap.ContextMenu({
    isCustom: true, 
    content: content.join('')
});

map.on('rightclick', function(e) {
    contextMenu.open(map, e.lnglat);
});