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 相关文章推荐
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
JS实现进度条动态加载特效
Mar 25 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实时显示输出
2008/10/02 PHP
php 空格,换行,跳格使用说明
2009/12/18 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
List the Codec Files on a Computer
2007/06/11 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
JS实现打字游戏
2019/12/17 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
python的re模块应用实例
2014/09/26 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
python+tkinter实现学生管理系统
2019/08/20 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
市场营销专业推荐信
2013/11/03 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
创建青年文明号材料
2014/05/09 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
小学假期安全广播稿
2014/09/28 职场文书
离婚上诉状范文
2015/05/23 职场文书
大学生读书笔记范文
2015/07/01 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL