zoukankan      html  css  js  c++  java
  • 百度地图js版定位控件

    一 概述

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

    GeolocationControl

    这个控件向外只暴露了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- 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(' 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(' 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- 50px');
    195             csstext.push('padding-left: 10px');
    196             csstext.push('padding-right: 10px');
    197             csstext.push('border-left- 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(' 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 })()
  • 相关阅读:
    JavaSE 基础 第51节 定义自己的异常
    JavaSE 基础 第50节 Java中的异常链
    JavaSE 基础 第49节 手动抛出异常
    JavaSE 基础 第48节 Java中的异常声明
    JavaSE 基础 第47节 获取异常信息
    JavaSE 基础 第46节 异常的分类
    JavaSE 基础 第45节Java异常快速入门
    JavaSE 基础 第44节 引用外部类的对象
    JavaSE 基础 第43节 静态内部类
    通用爬虫
  • 原文地址:https://www.cnblogs.com/rjjs/p/5462021.html
Copyright © 2011-2022 走看看