最近项目需要,稍微研究一下html5获取当前地理位置的问题。
获取当前位置的经纬度很简单,一句代码就搞定
- navigator.geolocation.getCurrentPosition(function (position) {
- longitude = position.coords.longitude;
- latitude = position.coords.latitude;
- });
然后查阅百度地图API,很easy,也是几句代码就搞定的事
- 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();
- geoc.getLocation(point, function(rs){
- var addComp = rs.addressComponents;
- alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
- });
好的,本以为到此结束,结果实际测试发现有点问题,显示的位置与我的真正位置偏差大约两三公里左右。
一开始以为是html5获取经纬度的偏差问题,然而并不是
然后开始查资料,无意中发现了一个叫做 坐标转换 的东西,一搜索才知道,原来百度地图对坐标进行了深度封装,必须通过他提供的接口进行坐标转换才行,废话不多说,上最终代码吧
- var map = new BMap.Map("allmap");
- var longitude, latitude;
- navigator.geolocation.getCurrentPosition(function (position) {
- longitude = position.coords.longitude;
- latitude = position.coords.latitude;
- });
- setTimeout(function () {
- var gpsPoint = new BMap.Point(longitude, latitude);
- BMap.Convertor.translate(gpsPoint, 0, function (point) {
- var geoc = new BMap.Geocoder();
- geoc.getLocation(point, function (rs) {
- var addComp = rs.addressComponents;
- alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
- });
- });
- }, 3000);
这段代码依赖两个包
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>
- <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>