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中使用inline函数的问题
Mar 08 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
js格式化时间的方法
Dec 18 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
关于Javascript闭包与应用的详解
Apr 22 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新手上路(六)
2006/10/09 PHP
PHP 的几个配置文件函数
2006/12/21 PHP
php 强制下载文件实现代码
2013/10/28 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
vue页面更新patch的实现示例
2020/03/25 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
python常规方法实现数组的全排列
2015/03/17 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
护士岗位职责
2014/02/16 职场文书
团代会宣传工作方案
2014/05/08 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
学校开学标语
2014/10/06 职场文书
2014年业务工作总结
2014/11/17 职场文书
2014年化验员工作总结
2014/11/18 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
毕业班工作总结
2015/08/10 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript