百度地图js版定位控件
一 概述
百度地图在最新版已加入浏览器定位控件,个人认为应该是既高德地图更新了一个浏览器也能定位功能后,百度不甘落后自己简简单单,草草写了个这个功能的定位控件
这个控件向外只暴露了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(';');
}; })()
百度地图js版定位控件的更多相关文章
- ADF控件ID变化引发JS无法定位控件的解决方法
原文地址:ADF控件ID变化引发JS无法定位控件的解决方法作者:Nicholas JSFF定义的控件ID到了客户端时往往会改变.例如在JSFF中的一个的ID为"ot1",但是当这个 ...
- Auto.js 特殊定位控件方法 不能在ui线程执行阻塞操作,请使用setTimeout代替
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! Auto.js 特殊定位控件方法 操作环 ...
- 百度地图--JS版
百度地图JS版本 ----选择关键字地图展示对应地址---- CSS body, html { width: %; height: %; margin: ; font-family: "微软 ...
- 玩转百度地图API(地图,坐标,标记,添加控件,2D图,混合图,智能搜索,地址解析器,信息窗口)
1.注册得到appkey 2.直接上代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...
- Google 地图 API V3 之控件
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- 百度地图 JS API开发Demo01
百度地图DEMO <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- 利用百度地图api实现定位
使用百度地图api前需要先获取一个百度地图开放平台的访问应用AK, 获取百度地图开放平台访问应用AK方式:注册百度账号-->申请百度开发者-->获取密匙-->使用相关功能. 注册账号 ...
- 《zw版·delphi与halcon系列原创教程》zw版_THOperatorSetX控件函数列表 v11中文增强版
<zw版·delphi与halcon系列原创教程>zw版_THOperatorSetX控件函数列表v11中文增强版 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就 ...
- 【Silverlight】Bing Maps开发应用与技巧一:地图打点与坐标控件(CoordControl)
[Silverlight]Bing Maps开发应用与技巧一:地图打点与坐标控件(CoordControl) 使用Bing Maps Silverlight Control开发中,很多时候都需要实现在 ...
随机推荐
- python IDE ulipad配置使用
一直认为认为python自带的编辑器idle实在是太简陋了,连显示行号的功能都没有,也非常不好编辑.找了下windows平台下的Ide,发现ulipad很多人推荐使用,就开始安装了. 首先去官网: h ...
- Android内存泄漏简介
前言 不少人认为JAVA程序,因为有垃圾回收机制,应该没有内存泄露. 其实如果我们一个程序中,已经不再使用某个对象,但是因为仍然有引用指向它,垃圾回收器就无法回收它,当然该对象占用的内存就无法被使用, ...
- cygrunsrv: Error starting a service: QueryServiceStatus: Win32 error 1062: 解决办法
问题原因:很可能是/var/log的权限设置不正确.首先执行 mkpasswd 和 mkgroup 重新生成权限信息,再删除sshd服务,重新配置 解决办法: $ mkpasswd -l > / ...
- Windows多线程
//简单的引出多线程是肿么回事儿....当点击下载的时候,下载内容还没结束也可以点击资源库,其实这就用了另一个线程,弹出“下载完成”对话框的时候,没有点击确定是不能点击主页面内容的,这就是用----- ...
- 06-IOSCore - KVC、CoreData
一. KVC 1. KVC 使用前:黯淡无光 if ([keyPath isEqualToString:@"name"]) { self.labelName.text = self ...
- 浅尝key-value数据库(三)——MongoDB的分布式
浅尝key-value数据库(三)——MongoDB的分布式 测试了单机MongoDB的随机读和写入性能,这一节来讲一讲MongoDB的分布式. MongoDB的分布式分成两种,一种是Replicat ...
- BitHacks--位操作技巧
---------------------------------------------------------------------------------------------------- ...
- Codeforces Round #270 A~D
Codeforces Round #270 A. Design Tutorial: Learn from Math time limit per test 1 second memory limit ...
- android事件传递机制以及onInterceptTouchEvent()和onTouchEvent()详解二之小秘与领导的故事
总结的不是很好,自己也有点看不懂,正好现在用到了,研究了一个,再次总结,方便大家查看 总则: 1.onInterceptTouchEvent中有个Intercept,这是什么意思呢?她叫拦截,你大概知 ...
- WCF技术剖析之六:为什么在基于ASP.NET应用寄宿(Hosting)下配置的BaseAddress无效
原文:WCF技术剖析之六:为什么在基于ASP.NET应用寄宿(Hosting)下配置的BaseAddress无效 本篇文章来源于几天前一个朋友向我咨询的问题.问题是这样的,他说他采用ASP.NET应用 ...