开发 地图 JS API 2.0 进阶教程 控件和弹窗 右键菜单

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

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

准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

右键菜单 ContextMenu

具体使用方式如下:

1

创建地图

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

创建菜单实例

// 菜单内容
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('')
});
3

绑定右键菜单事件

map.on('rightclick', function(e) {
    contextMenu.open(map, e.lnglat);
});
返回顶部 示例中心 常见问题 智能客服