js实现百度地图定位于地址逆解析,显示自己当前的地理位置


Posted in Javascript onDecember 08, 2016

话不多说,随小编一起看看实例代码吧

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <style type="text/css">
 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
 </style>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>//这个需要单独申请,只有获取到这个密匙那么才可以使用百度地图
 //获取密钥地址:http://lbsyun.baidu.com/index.php?title=jspopular进入之后点击获取密钥
 <title>浏览器定位</title>
</head>
<body>
 <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
 // 百度地图API功能
 var map = new BMap.Map("allmap");
 var point = new BMap.Point(116.331398,39.897445);
 map.centerAndZoom(point,12);
//以上参数不用设置
//以下是获取当前的地理位置
 var geolocation = new BMap.Geolocation();
 geolocation.getCurrentPosition(function(r){
 if(this.getStatus() == BMAP_STATUS_SUCCESS){
  //表示获取成功那么 r 这个参数就包含有当前的地理位置经纬度

//逆地址解析,就是要把当前的经纬度转为当前具体地理位置


//逆地址解析



var geoc = new BMap.Geocoder();



var pt = new BMap.Point(p_x, p_y);//实例化这两个点



geoc.getLocation(pt, function (rs) {




var addComp = rs.addressComponents;




$('.its-place').html(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber)




alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);





//对应的省市区、县街道,街道号


});

}else {
  alert('failed'+this.getStatus());
 } 
 },{enableHighAccuracy: true})
 //关于状态码
 //BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
 //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
 //BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
 //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
 //BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
 //BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
 //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
 //BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
 //BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
js constructor的实际作用分析
Nov 15 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 #Javascript
js倒计时小实例(多次定时)
Dec 08 #Javascript
详解JavaScript中的属性和特性
Dec 08 #Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 #Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 #Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 #Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 #Javascript
You might like
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php把session写入数据库示例
2014/02/26 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
jQuery设计思想
2017/03/07 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python的id()函数介绍
2013/02/10 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Python实现两款计算器功能示例
2017/12/19 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
决定成败的关键——创业计划书
2014/01/24 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
招标承诺书
2014/08/30 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
Python的这些库,你知道多少?
2021/06/09 Python
Windows7下FTP搭建图文教程
2022/08/05 Servers