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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 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自动识别字符集并完成转码详解
2013/08/02 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
python hook监听事件详解
2018/10/25 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
法学毕业生自荐信
2013/11/13 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
门店店长岗位职责
2015/04/14 职场文书
务工证明怎么写
2015/06/18 职场文书
合理化建议书范文
2015/09/14 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
mybatis 获取更新记录的id
2022/05/20 Java/Android