右键菜单

更新时间：2020年08月07日

简介

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

DEMO详情

添加右键菜单

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