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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
javascript倒计时效果实现
Nov 12 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 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
php打造属于自己的MVC框架
2012/03/07 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
Javascript中replace()小结
2015/09/30 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python监控键盘输入实例代码
2018/02/09 Python
pandas中的series数据类型详解
2019/07/06 Python
浅谈Python type的使用
2019/11/19 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
应聘教师推荐信
2013/10/31 职场文书
大学总结自我鉴定
2014/01/18 职场文书
高中打架检讨书
2014/02/13 职场文书
临床专业自荐信
2014/06/22 职场文书
会议主持词开场白
2015/05/28 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
浅谈Vue的computed计算属性
2022/03/21 Vue.js