右键菜单最后更新时间: 2024年02月04日

地图上的右键菜单是一种特殊的信息窗体，它为用户提供了便捷的操作方式。本文介绍如何使用AMap.ContextMenu创建自定义右键菜单。

默认右键菜单示例

亲手试一试

下载完整代码

提示

JS API 不仅支持在地图上添加默认的右键菜单，还支持为覆盖物添加右键菜单，如需了解,可前往覆盖物添加右键菜单示例。

添加默认右键菜单 ContextMenu

1.1 准备

成为开发者并创建 key

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

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

1.2 创建地图

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

前往展示地图，了解完整地图创建

1.3 创建菜单实例

var contextMenu = new AMap.ContextMenu();

1.4 添加菜单功能

//右键放大
contextMenu.addItem("放大一级", function () {
  map.zoomIn();
}, 0);
//右键缩小
contextMenu.addItem("缩小一级", function () {
  map.zoomOut();
}, 1);

使用contextMenu.addItem(text, fn, num)方法，可以为菜单添加功能，其中text参数为菜单上显示的文本内容，fn参数指定了当用户点击菜单项时要执行的回调函数，num参数决定了菜单项在菜单中的位置。

1.5 绑定右键菜单事件

//地图绑定鼠标右击事件——弹出右键菜单
map.on('rightclick', function (e) {
  contextMenu.open(map, e.lnglat);
});

使用contextMenu.open(map, position)方法，可以打开右键菜单。其中map参数表示当前地图实例，position参数为菜单弹出的具体位置。

查看AMap.ContextMenu全部属性和方法

除了使用默认的右键菜单，你还可以选择自定义右键菜单。如果需要更多信息，请访问自定义右键菜单示例。