百度地图(22)-GL 添加地图控件

摘要:
1**2*添加位置控件3*@type{BMapGL.LocationControl}4*/5functionaddLocationControl(){67varlocationControl=newBMapGL.RocationControl;11map.addControl;1213locationControl.addEventListener;2223locationControl/addEventListener26}2728/**29*添加自定义版权控件30*/31functionaddCopyRightControl(){32varcr=newBMapGL.CopyrightControl;//设置版权控件36map.addControl的位置;//添加版权控件37varbs=map.getBounds();//返回地图可见区域38cr.addCopyright;43}4445/*46*城市列表47*@type{BMapGL.TityListControl}48*/49functionaddCityListControl控件60**/61functionaddMapControls(){6263//添加地图导航控件64map.addControl;6566//添加地图缩放控件67/*68*缩放工具和版本标识工具使用相同的类anchorBL,因此当使用CSS显示时:none删除左下角的百度标志和版权标志69*,缩放工具也将隐藏。

1. 百度地图GLAPI提供了的Control,比二维的控件少的多,主要是

NavigationControl3D,ScaleControl,ZoomControl , CityListControl,LocationControl, CopyrightControl 。

2. 其主要用法和二维控件相似,初始化后直接添加。

 1 /**
 2  * 添加定位控件
 3  * @type {BMapGL.LocationControl}
 4  */
 5 function addLocationControl() {
 6 
 7   var locationControl = new BMapGL.LocationControl({
 8     anchor:BMAP_ANCHOR_TOP_RIGHT,
 9     offset: new BMapGL.Size(20,20)
10   });
11   map.addControl(locationControl);
12 
13   locationControl.addEventListener("locationSuccess",function (e) {
14     var address = "";
15     address += e.addressComponent.province;
16     address += e.addressComponent.city;
17     address += e.addressComponent.district;
18     address += e.addressComponent.street;
19     address += e.addressComponent.streetNumber;
20     console.log("当前定位地址:"+address);
21   });
22 
23   locationControl.addEventListener("locationError",function (e) {
24     console.log("定位错误:"+ e.message);
25   });
26 }
27 
28 /**
29  * 添加自定义版权控件
30  */
31 function addCopyRightControl() {
32   var cr = new BMapGL.CopyrightControl({
33     anchor: BMAP_ANCHOR_TOP_RIGHT,
34     offset: new BMapGL.Size(20, 20)
35   });   //设置版权控件位置
36   map.addControl(cr); //添加版权控件
37   var bs = map.getBounds();   //返回地图可视区域
38   cr.addCopyright({
39     id: 1,
40     content: "<img src='http://t.zoukankan.com/img/baidu.jpg'    /><a href='http://t.zoukankan.com/googlegis-p-14705024.html#' style='font-size:16px;color:#000'>@安徽舜禹水务股份有限公司</a>",
41     bounds: bs
42   });
43 }
44 
45 /**
46  * 城市列表
47  * @type {BMapGL.CityListControl}
48  */
49 function addCityListControl() {
50   var cityControl = new BMapGL.CityListControl({
51     anchor: BMAP_ANCHOR_TOP_LEFT,
52     offset: new BMapGL.Size(10,5)
53   });
54   map.addControl(cityControl);
55 }
56 
57 
58 /**
59  *  添加地图控件
60  **/
61 function addMapControls() {
62 
63   //添加地图导航控件
64   map.addControl(new BMapGL.NavigationControl3D());
65 
66   //添加地图比例尺控件
67   /**
68    * 比例尺工具与版本标识工具所用同一个class,anchorBL, 所以,当采用CSS方式 display:none 去掉左下角
69    * 的百度标识和版权标识时,缩放比例工具也会被隐藏。
70    **/
71   map.addControl(new BMapGL.ScaleControl());
72 
73   map.addControl(new BMapGL.ZoomControl());
74 
75   addCityListControl();
76 
77   addLocationControl();
78 
79 }

4. ScaleControl 的样式与左下角百度的logo使用的同一个css,为了隐藏logo把ScaleControl也隐藏了。

5.. 页面显示

百度地图(22)-GL 添加地图控件第1张

 6. 代码参考

https://github.com/WhatGIS/bdMap

免责声明:文章转载自《百度地图(22)-GL 添加地图控件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())Datatable中对某列求和,三种不同情况下的方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

CAS单点登录------未认证授权服务

问题背景:之前我使用的127.0.0.1进行CAS直接url进行过滤!后来我用nginx进行反向代理出现问题:如下图第一眼,就在内心想,草这什么鬼!调试了五分钟发现还是不行!  网上各种教程!  半小时过去了!我吧配置文件自己看看!    出现这样问题:原因是CAS 的服务认真之前先有个REgx的正则判断,目录如上看这个正则时候,我瞬间明白了,我下面这个问题...

Flutter——数组以符号隔开转字符串

///数组转换为字符串StringgetTaskScreen(Listlist){ListtempList=List();Stringstr='';List.forEach((f){tempList.add(f.title);});临时列表。forEach((f){if(str==“”){str=“$f”;}否则{str=“$str”,“$f”;}});re...

vSphere HA 原理与配置

应当基于可用性需求和群集的特性选择vSphereHA接入控制策略。...

怎么使用vscode合并分支

1.切换分支到本地开发2.代码完成后提交代码到本地仓库3.切换分支到需要merge的test分支先pull一下,之后再合并分支—我开发的是这个feature,就合并这个分支4.当合并分支后,需要重新提交到远程:点击一下,直接提交...

Vue 引入 svg文件

在图标显示中,通常使用font真棒图标库,它很简单,只需下载和导入即可。重要的显示:内联块;}2.在src目录下,添加一个名为icons的文件夹,并在icons文件夹下添加索引。js文件和svg文件夹,其中svg文件存储在svg文件夹中。...

json文件 乱码问题 根本解决办法

1工具→ 定制2单击命令选项卡;3选择上部单选区域中的菜单栏,然后从下拉列表中选择文件;4单击“添加”命令5,在类别中查找文件,找到右侧的高级保存选项,然后单击“确定”6,通过向下移动来调整“文件”菜单中选项的位置。如果你有任何问题,请留言!...