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面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
js如何取消事件冒泡
Sep 23 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 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
js类 from qq
2006/11/13 Javascript
JS日历 推荐
2006/12/03 Javascript
JS 强制设为首页的代码
2009/01/31 Javascript
js 异步处理进度条
2010/04/01 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
python之wxPython应用实例
2014/09/28 Python
django实现前后台交互实例
2017/08/07 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
新闻记者个人求职的自我评价
2013/11/28 职场文书
职务任命书范本
2014/06/05 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
店铺转让协议书
2014/12/02 职场文书