浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版
右键菜单
更新时间:2020年08月07日
简介

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)以及一个可选的MenultOptions(对象字面量)参数。

在MenultOptions中,您可以指定菜单项的宽度以及菜单项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);                           // 给地图添加右键菜单
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消