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 prototype属性深入介绍
Nov 27 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 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获取网络文件的实现代码
2010/01/01 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
建筑工程实习自我鉴定
2013/09/19 职场文书
秋天的图画教学反思
2014/05/01 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
学校宣传标语
2014/06/18 职场文书
德育标兵事迹材料
2014/08/24 职场文书
2014年城管工作总结
2014/11/20 职场文书
个人典型事迹材料
2014/12/30 职场文书
领导干部失职检讨书
2015/05/05 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
入党转正申请书范文
2019/05/20 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis