百度地图js版定位控件

一 概述

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

GeolocationControl

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

存在的问题

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

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

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

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

二 自定义

2.1 Geolocation

百度一直提供Geolocation定位服务，这种定位原理其实依赖于支持webkit的浏览器内置api，只不过百度自己做了一层封装，并把定位结果的坐标做了转换

2.2 自定义功能点

1）定位不一定需要居中

2）可自行在地图加载完成中实现自动定位

3）定位完成后不管失败均应显示文本

4）应规避一些js错误

2.3 实现代码

 var BMapLib = window.BMapLib = BMapLib || {};
 (function () {

     /**
      *@ LocateControl
      */
     var LocateControl =
         /**
          * LocateControl
          * @class
          * @constructor
          * @param {Map} map 地图的一个实例。
          * @remark
          *
          */
         BMapLib.LocateControl = function (options) {
             this.defaultAnchor = options.anchor;
             this.defaultOffset = options.offset || new BMap.Size(10, 20);
             this.map = null;
             this.marker = null;
             this.addTxt = null;
         };

         LocateControl.prototype = new BMap.Control();

        /**
         * 定位
         *
         */
         LocateControl.prototype.location = function (autoCenter) {
             var that = this;

             that.locating();
             var geolocation = new BMap.Geolocation();
             geolocation.getCurrentPosition(function (r) {

                 that.located();

                 if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                     if (!that.marker) {
                         var icon = new BMap.Icon('../image/icon_center_point.png', new BMap.Size(24, 24));
                         that.marker = new BMap.Marker(r.point, {icon:icon});
                         that.map.addOverlay(that.marker);
                     } else {
                         that.marker.setPosition(r.point);
                     }
                     if (autoCenter===true)
                         that.map.panTo(r.point);

                     var address = r.address;
                     that.addTxt.innerText = address.province + address.city + address.district + address.street + address.street_number;

                     that.showAddress();

                     var c = {};
                     c.point = r.point;
                     c.code = this.getStatus();
                     c.address = that.addTxt.innerText;
                     c.message = "定位成功";
                     c.type = "locationSuccess";
                     that.dispatchEvent(c);

                 } else {
                     that.addTxt.innerText = '定位失败';
                     that.showAddress();
                     var c = {};
                     c.code = this.getStatus();
                     c.message = "超时";
                     c.type = "locationError";
                     that.dispatchEvent(c);
                 }
             }, {
                 enableHighAccuracy: true,
                 timeout: 2E4,
                 maximumAge:0
             });

         };

        /**
         * 初始化
         */
         LocateControl.prototype.initialize = function(map) {
             this.map = map;
             var that = this;
             map.addEventListener('touchstart', function () {
                 that.closeAddress();
             });
             map.addEventListener('click', function () {
                 that.closeAddress();
             });

             var container = document.createElement('div');
             container.style.cssText += this.buildContainerCss();
             container.className += " breathe-btn";

             var bgDiv  = document.createElement('div');
             bgDiv.style.cssText += this.buildBgCss();
             container.appendChild(bgDiv);

             var locationIcon = this.locationIcon = document.createElement('div');

             locationIcon.style.cssText += this.buildIconCss();
             locationIcon.addEventListener('click', function () { that.location(true); });
             bgDiv.appendChild(locationIcon);

             var address = this.bgDiv = document.createElement('div');
             address.style.cssText += this.buildAddressCss();

             var adDiv = document.createElement('div');
             adDiv.style.cssText += "height: 32px;display: table-cell;vertical-align: middle;";
             address.appendChild(adDiv);

             var addTxt = this.addTxt = document.createElement('div');
             addTxt.style.cssText += "font-size: 12px;color: #666666;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display: block;min-width: 50px;";
             adDiv.appendChild(addTxt);
             addTxt.innerText = '';

             container.appendChild(address);

             this.map.getContainer().appendChild(container);
             return container;

         };

     LocateControl.prototype.locating = function() {
         this.locationIcon.style.backgroundImage='url("http://api0.map.bdimg.com/images/geolocation-control/mobile/loading-40x40.gif")';
     };

     LocateControl.prototype.located= function () {
         this.locationIcon.style.backgroundImage = 'url("http://api0.map.bdimg.com/images/geolocation-control/mobile/default-40x40.png")';
     };

         LocateControl.prototype.showAddress = function() {
             this.bgDiv.style.display = 'block';
         };

         LocateControl.prototype.closeAddress = function () {
             this.bgDiv.style.display = 'none';
         };

         LocateControl.prototype.buildContainerCss = function () {
             var csstext = [];
             csstext.push('height: 32px');
             csstext.push('margin: 0px');
             csstext.push('box-sizing: border-box');
             csstext.push('border: 1px solid #d9d7d5');
             csstext.push('border-radius: 3px');
             csstext.push('overflow: hidden');
             csstext.push('-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2)');

             return csstext.join(';');
         };

         LocateControl.prototype.buildBgCss = function () {
             var csstext = [];
             csstext.push('float: left');
             csstext.push('width: 32px');
             csstext.push('height: 32px');
             csstext.push('background-image: url("http://api0.map.bdimg.com/images/geolocation-control/mobile/gradient-bg-1x64.png")');
             csstext.push('background-size: 1px 32px');
             csstext.push('background-repeat: repeat-x');

             return csstext.join(';');
         };

         LocateControl.prototype.buildIconCss = function () {
             var csstext = [];
             csstext.push('width: 32px');
             csstext.push('height: 32px');
             csstext.push('cursor: pointer');
             csstext.push('background-image: url("http://api0.map.bdimg.com/images/geolocation-control/mobile/default-40x40.png")');
             csstext.push('background-size: 20px 20px');
             csstext.push('background-position: 50% 50%');
             csstext.push('background-repeat: no-repeat');

             return csstext.join(';');
         };

         LocateControl.prototype.buildAddressCss = function () {
             var csstext = [];
             csstext.push('display: none');
             csstext.push('float: left');
             csstext.push('min-width: 50px');
             csstext.push('padding-left: 10px');
             csstext.push('padding-right: 10px');
             csstext.push('border-left-width: 1px');
             csstext.push('border-left-style: solid');
             csstext.push('border-left-color: rgb(217, 215, 213)');
             csstext.push('background-image: url("http://api0.map.bdimg.com/images/geolocation-control/mobile/gradient-bg-1x64.png")');
             csstext.push('background-size: 1px 32px');
             csstext.push('background-repeat: repeat-x');

             return csstext.join(';');
         };

         LocateControl.prototype.buildCss = function() {
             var csstext = [];
             csstext.push('width: 14px');
             csstext.push('height: 14px');
             csstext.push('vertical-align: middle');
             csstext.push('display: inline-block');
             csstext.push('background-size: 76px,auto');
             csstext.push('background:url(' + 'http://webmap2.map.bdstatic.com/wolfman/static/common/images/ipLocation/ipLocation_723c166.png' + ')');
             csstext.push('background-position:-14px 0;');
             return csstext.join(';');
         };

 })()