AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/27 10:37
您当前查看的是 JSAPI GL 历史版本文档。该版本仅用于维护现有项目,不建议用于新项目开发。新项目请使用 JSAPI 4.0,如需升级现有项目,请参考升级指南
You are viewing the legacy JSAPI GL documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.
右键菜单
简介

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); // 给地图添加右键菜单

上一篇

地图事件

下一篇

自定义视角动画
本篇文章对您是否有帮助?