使用html5获取当前手机的经纬度,并接入百度地图API,查询出当前位置

最近项目需要,稍微研究一下html5获取当前地理位置的问题。

获取当前位置的经纬度很简单,一句代码就搞定

[javascript]   view plain  copy
  1. navigator.geolocation.getCurrentPosition(function (position) {  
  2.                 longitude = position.coords.longitude;  
  3.                 latitude = position.coords.latitude;  
  4.             });  

然后查阅百度地图API,很easy,也是几句代码就搞定的事

[javascript]   view plain  copy
  1. var map = new BMap.Map("allmap");<pre name="code" class="javascript">        var point = new BMap.Point(longitude,latitude);<pre name="code" class="javascript">        var geoc = new BMap.Geocoder();  
[javascript]   view plain  copy
  1.         geoc.getLocation(point, function(rs){  
  2.             var addComp = rs.addressComponents;  
  3.             alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);  
  4.         });    

 
 

好的,本以为到此结束,结果实际测试发现有点问题,显示的位置与我的真正位置偏差大约两三公里左右。

一开始以为是html5获取经纬度的偏差问题,然而并不是

然后开始查资料,求助强大的度娘,然后无意中发现了一个叫做 坐标转换 的东西,一搜索才知道,原来百度地图对坐标进行了深度封装,必须通过他提供的接口进行坐标转换才行

(当然了,还是因为我以前没接触过百度地图,所以不知道这点知识,常用百度地图api的应该对这个很熟悉的吧)

好了,废话不多说,上最终代码吧

[javascript]   view plain  copy
  1. var map = new BMap.Map("allmap");  
  2. var longitude, latitude;  
  3. navigator.geolocation.getCurrentPosition(function (position) {  
  4.     longitude = position.coords.longitude;  
  5.     latitude = position.coords.latitude;  
  6. });  
  7. setTimeout(function () {  
  8.     var gpsPoint = new BMap.Point(longitude, latitude);  
  9.     BMap.Convertor.translate(gpsPoint, 0, function (point) {  
  10.         var geoc = new BMap.Geocoder();  
  11.         geoc.getLocation(point, function (rs) {  
  12.             var addComp = rs.addressComponents;  
  13.             alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);  
  14.         });  
  15.     });  
  16. }, 3000);  
这段代码依赖两个包

[html]   view plain  copy
  1. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>  
  2. <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>  

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值