AI
产品服务
解决方案
文档与支持
定价
更新时间: 2026/03/12 14:35
右键菜单
简介

Javascript API GL支持右键菜单,您可以在地图上添加自定义内容的右键菜单。

添加右键菜单

Javascript API GL提供了 addContextMenu 方法来向地图添加自定义右键菜单。

1. 创建基本地图
var map = new BMapGL.Map("allmap"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 设置中心点坐标
map.centerAndZoom(point, 12); // 设置地图级别
map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
2. 定义菜单项

Javascript API GL 提供了 MenuItem 构造函数来定义菜单项实例,其接收三个参数,分别是菜单项显示的文本(string)、点击后的回调函数(Function)以及一个可选的 MenuItemOptions(对象字面量)参数。

在 MenuItemOptions 中,您可以指定菜单项的宽度以及菜单项 dom 的 id。

var txtMenuItem = [
{
text:'放大', // 定义菜单项的显示文本
callback: function () { // 定义菜单项点击触发的回调函数
map.zoomIn();
}
},
{
text:'缩小',
callback: function () {
map.zoomOut();
}
}
];
for(var i = 0; i < txtMenuItem.length; i++){
menu.addItem(new BMapGL.MenuItem( // 定义菜单项实例
txtMenuItem[i].text, // 传入菜单项的显示文本
txtMenuItem[i].callback, // 传入菜单项的回调函数
{
width: 300, // 指定菜单项的宽度
id: 'menu' + i // 指定菜单项dom的id
}
));
}
3. 给地图添加右键菜单

使用 addContextMenu 方法给地图添加右键菜单。

map.addContextMenu(menu); // 给地图添加右键菜单

上一篇

地图事件

下一篇

自定义视角动画

本篇文章对您是否有帮助?