右键菜单 最后更新时间: 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);
});