使用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>