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下的keyCode键码值表
Apr 10 Javascript
Cookie 小记
Apr 01 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
js实现div色块拖动录制
Jan 16 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
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
python编程线性回归代码示例
2017/12/07 Python
Python中property函数用法实例分析
2018/06/04 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
大学生水文观测实习自我鉴定
2013/09/29 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
电大会计学自我鉴定
2014/02/06 职场文书
工厂车间标语
2014/06/19 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书