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 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
domReady的实现案例
Nov 23 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
php实现每日签到功能
2018/11/29 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
Node.js使用Express.Router的方法
2017/11/14 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
Python高并发和多线程有什么关系
2020/11/14 Python
Java编程面试题
2016/04/04 面试题
美术教师岗位职责
2014/03/18 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
检察院起诉书
2015/05/20 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
golang操作rocketmq的示例代码
2022/04/06 Golang