(未显示1个用户的1个中间版本) | |||
第2行: | 第2行: | ||
<div class="h1-title">右键菜单</div><div id="update-time1">更新时间:2020年08月07日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text"> | <div class="h1-title">右键菜单</div><div id="update-time1">更新时间:2020年08月07日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text"> | ||
Javascript API GL支持右键菜单,您可以在地图上添加自定义内容的右键菜单。 | Javascript API GL支持右键菜单,您可以在地图上添加自定义内容的右键菜单。 | ||
− | </div><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/webgl4_0.htm"></div><div class="top_right">[ | + | </div><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/webgl4_0.htm"></div><div class="top_right">[https://lbsyun.baidu.com/jsdemo.htm#kMapClickEvent DEMO详情]</div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>添加右键菜单</span></div></div></div><div class="serve-explain-text">Javascript API GL提供了addContextMenu方法来向地图添加自定义右键菜单。</div><div class="devguide"><div class="leftborderbg" style="height:180px;"></div><div class="devguideorder"><span>1</span>创建基本地图</div><div class="devguidecenter"><pre class="prettyprint codestyle">var map = new BMapGL.Map("allmap"); // 创建地图实例 |
var point = new BMapGL.Point(116.404, 39.915); // 设置中心点坐标 | var point = new BMapGL.Point(116.404, 39.915); // 设置中心点坐标 | ||
map.centerAndZoom(point, 12); // 设置地图级别 | map.centerAndZoom(point, 12); // 设置地图级别 | ||
第11行: | 第11行: | ||
在MenultOptions中,您可以指定菜单项的宽度以及菜单项dom的id。 | 在MenultOptions中,您可以指定菜单项的宽度以及菜单项dom的id。 | ||
− | <pre class="prettyprint codestyle">var txtMenuItem = [ | + | <pre class="prettyprint codestyle" style="overflow-y: scroll;">var txtMenuItem = [ |
{ | { | ||
text:'放大', // 定义菜单项的显示文本 | text:'放大', // 定义菜单项的显示文本 |
2022年10月21日 (五) 15:41的最后版本
右键菜单
更新时间: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); // 给地图添加右键菜单