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设置和获取cookie的方法实例详解
Jan 05 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
Vue.js中的组件系统
May 30 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 Javascript
vuex的使用步骤
Jan 06 Vue.js
通过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进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
python比较2个xml内容的方法
2015/05/11 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
护士上岗前培训自我鉴定
2014/04/20 职场文书
养成教育经验材料
2014/05/26 职场文书
抵押贷款承诺书
2014/05/30 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
2014年采购部工作总结
2014/11/20 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
环保证明
2015/06/23 职场文书
国家助学金受助感言
2015/08/01 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书