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

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

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

默认右键菜单示例

提示

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

添加默认右键菜单 ContextMenu

1

1.1 准备

成为开发者并创建 key

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

提示

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

2

1.2 创建地图

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

1.3 创建菜单实例

var contextMenu = new AMap.ContextMenu();
4

1.4 添加菜单功能

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

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

5

1.5 绑定右键菜单事件

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

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

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

返回顶部 示例中心 常见问题 智能客服 公众号
二维码