正文
百度地图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(';');
}; })()
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(';');
}; })()
