百度地图(22)-GL 添加地图控件
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='../img/baidu.jpg' width='50px' height='50px'/><a href='#' 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.. 页面显示
6. 代码参考
https://github.com/WhatGIS/bdMap