百度地图js版定位控件
一 概述
百度地图在最新版已加入浏览器定位控件，个人认为应该是既高德地图更新了一个浏览器也能定位功能后，百度不甘落后自己简简单单，草草写了个这个功能的定位控件
这个控件向外只暴露了2个方法定位和获取位置信息，以及定位失败和成功的时间，可以说是非常粗暴的，
存在的问题
1 当浏览器不允许访问位置是会报js错误，原因在于没有规避处理，可见百度地图是比较水的
2 该定位一如既往的与地图有一定的绑定依赖，且在其选项中可以设置新建该对象时自动定位，但是并没有真正定位
3 直接粗暴认为定位就一定要地图居中
4 定位失败其控件并不自动显示失败文本
二 自定义
2.1 Geolocation
百度一直提供Geolocation定位服务，这种定位原理其实依赖于支持webkit的浏览器内置api，只不过百度自己做了一层封装，并把定位结果的坐标做了转换
2.2 自定义功能点
1）定位不一定需要居中
2）可自行在地图加载完成中实现自动定位
3）定位完成后不管失败均应显示文本
4）应规避一些js错误
2.3 实现代码
1 var BMapLib = window.BMapLib = BMapLib || {}; 2 (function () { 3 4 /** 5 *@ LocateControl 6 */ 7 var LocateControl = 8 /** 9 * LocateControl 10 * @class 11 * @constructor 12 * @param {Map} map 地图的一个实例。 13 * @remark 14 * 15 */ 16 BMapLib.LocateControl = function (options) { 17 this.defaultAnchor = options.anchor; 18 this.defaultOffset = options.offset || new BMap.Size(10, 20); 19 this.map = null; 20 this.marker = null; 21 this.addTxt = null; 22 }; 23 24 25 LocateControl.prototype = new BMap.Control(); 26 27 /** 28 * 定位 29 * 30 */ 31 LocateControl.prototype.location = function (autoCenter) { 32 var that = this; 33 34 that.locating(); 35 var geolocation = new BMap.Geolocation(); 36 geolocation.getCurrentPosition(function (r) { 37 38 that.located(); 39 40 if (this.getStatus() == BMAP_STATUS_SUCCESS) { 41 if (!that.marker) { 42 var icon = new BMap.Icon('../image/icon_center_point.png', new BMap.Size(24, 24)); 43 that.marker = new BMap.Marker(r.point, {icon:icon}); 44 that.map.addOverlay(that.marker); 45 } else { 46 that.marker.setPosition(r.point); 47 } 48 if (autoCenter===true) 49 that.map.panTo(r.point); 50 51 var address = r.address; 52 that.addTxt.innerText = address.province + address.city + address.district + address.street + address.street_number; 53 54 that.showAddress(); 55 56 var c = {}; 57 c.point = r.point; 58 c.code = this.getStatus(); 59 c.address = that.addTxt.innerText; 60 c.message = "定位成功"; 61 c.type = "locationSuccess"; 62 that.dispatchEvent(c); 63 64 } else { 65 that.addTxt.innerText = '定位失败'; 66 that.showAddress(); 67 var c = {}; 68 c.code = this.getStatus(); 69 c.message = "超时"; 70 c.type = "locationError"; 71 that.dispatchEvent(c); 72 } 73 }, { 74 enableHighAccuracy: true, 75 timeout: 2E4, 76 maximumAge:0 77 }); 78 79 }; 80 81 /** 82 * 初始化 83 */ 84 LocateControl.prototype.initialize = function(map) { 85 this.map = map; 86 var that = this; 87 map.addEventListener('touchstart', function () { 88 that.closeAddress(); 89 }); 90 map.addEventListener('click', function () { 91 that.closeAddress(); 92 }); 93 94 95 var container = document.createElement('div'); 96 container.style.cssText += this.buildContainerCss(); 97 container.className += " breathe-btn"; 98 99 100 var bgDiv = document.createElement('div'); 101 bgDiv.style.cssText += this.buildBgCss(); 102 container.appendChild(bgDiv); 103 104 105 var locationIcon = this.locationIcon = document.createElement('div'); 106 107 locationIcon.style.cssText += this.buildIconCss(); 108 locationIcon.addEventListener('click', function () { that.location(true); }); 109 bgDiv.appendChild(locationIcon); 110 111 112 var address = this.bgDiv = document.createElement('div'); 113 address.style.cssText += this.buildAddressCss(); 114 115 var adDiv = document.createElement('div'); 116 adDiv.style.cssText += "height: 32px;display: table-cell;vertical-align: middle;"; 117 address.appendChild(adDiv); 118 119 var addTxt = this.addTxt = document.createElement('div'); 120 addTxt.style.cssText += "font-size: 12px;color: #666666;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display: block;min-width: 50px;"; 121 adDiv.appendChild(addTxt); 122 addTxt.innerText = ''; 123 124 125 126 container.appendChild(address); 127 128 129 130 this.map.getContainer().appendChild(container); 131 return container; 132 133 }; 134 135 136 LocateControl.prototype.locating = function() { 137 this.locationIcon.style.backgroundImage='url("http://api0.map.bdimg.com/images/geolocation-control/mobile/loading-40x40.gif")'; 138 }; 139 140 LocateControl.prototype.located= function () { 141 this.locationIcon.style.backgroundImage = 'url("http://api0.map.bdimg.com/images/geolocation-control/mobile/default-40x40.png")'; 142 }; 143 144 LocateControl.prototype.showAddress = function() { 145 this.bgDiv.style.display = 'block'; 146 }; 147 148 LocateControl.prototype.closeAddress = function () { 149 this.bgDiv.style.display = 'none'; 150 }; 151 152 LocateControl.prototype.buildContainerCss = function () { 153 var csstext = []; 154 csstext.push('height: 32px'); 155 csstext.push('margin: 0px'); 156 csstext.push('box-sizing: border-box'); 157 csstext.push('border: 1px solid #d9d7d5'); 158 csstext.push('border-radius: 3px'); 159 csstext.push('overflow: hidden'); 160 csstext.push('-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2)'); 161 162 return csstext.join(';'); 163 }; 164 165 LocateControl.prototype.buildBgCss = function () { 166 var csstext = []; 167 csstext.push('float: left'); 168 csstext.push('width: 32px'); 169 csstext.push('height: 32px'); 170 csstext.push('background-image: url("http://api0.map.bdimg.com/images/geolocation-control/mobile/gradient-bg-1x64.png")'); 171 csstext.push('background-size: 1px 32px'); 172 csstext.push('background-repeat: repeat-x'); 173 174 return csstext.join(';'); 175 }; 176 177 LocateControl.prototype.buildIconCss = function () { 178 var csstext = []; 179 csstext.push('width: 32px'); 180 csstext.push('height: 32px'); 181 csstext.push('cursor: pointer'); 182 csstext.push('background-image: url("http://api0.map.bdimg.com/images/geolocation-control/mobile/default-40x40.png")'); 183 csstext.push('background-size: 20px 20px'); 184 csstext.push('background-position: 50% 50%'); 185 csstext.push('background-repeat: no-repeat'); 186 187 return csstext.join(';'); 188 }; 189 190 LocateControl.prototype.buildAddressCss = function () { 191 var csstext = []; 192 csstext.push('display: none'); 193 csstext.push('float: left'); 194 csstext.push('min-width: 50px'); 195 csstext.push('padding-left: 10px'); 196 csstext.push('padding-right: 10px'); 197 csstext.push('border-left-width: 1px'); 198 csstext.push('border-left-style: solid'); 199 csstext.push('border-left-color: rgb(217, 215, 213)'); 200 csstext.push('background-image: url("http://api0.map.bdimg.com/images/geolocation-control/mobile/gradient-bg-1x64.png")'); 201 csstext.push('background-size: 1px 32px'); 202 csstext.push('background-repeat: repeat-x'); 203 204 return csstext.join(';'); 205 }; 206 207 LocateControl.prototype.buildCss = function() { 208 var csstext = []; 209 csstext.push('width: 14px'); 210 csstext.push('height: 14px'); 211 csstext.push('vertical-align: middle'); 212 csstext.push('display: inline-block'); 213 csstext.push('background-size: 76px,auto'); 214 csstext.push('background:url(' + 'http://webmap2.map.bdstatic.com/wolfman/static/common/images/ipLocation/ipLocation_723c166.png' + ')'); 215 csstext.push('background-position:-14px 0;'); 216 return csstext.join(';'); 217 }; 218 219 })()
