一 概述

百度地图在最新版已加入浏览器定位控件，个人认为应该是既高德地图更新了一个浏览器也能定位功能后，百度不甘落后自己简简单单，草草写了个这个功能的定位控件

这个控件向外只暴露了2个方法定位和获取位置信息，以及定位失败和成功的时间，可以说是非常粗暴的，

存在的问题

1 当浏览器不允许访问位置是会报js错误，原因在于没有规避处理，可见百度地图是比较水的

2 该定位一如既往的与地图有一定的绑定依赖，且在其选项中可以设置新建该对象时自动定位，但是并没有真正定位

3 直接粗暴认为定位就一定要地图居中

4 定位失败其控件并不自动显示失败文本

 

二 自定义

2.1 

百度一直提供定位服务，这种定位原理其实依赖于支持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 })()