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


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

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

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

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

    [javascript] view plain copy print?
    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 print?
    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获取经纬度的偏差问题,然而并不是

    然后开始查资料,无意中发现了一个叫做 坐标转换 的东西,一搜索才知道,原来百度地图对坐标进行了深度封装,必须通过他提供的接口进行坐标转换才行,废话不多说,上最终代码吧

    [javascript] view plain copy print?
    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);  
             

    这段代码依赖两个包

    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>  
     
  • 相关阅读:
    EasyNVR加密机授权后,通道和设备信息变为空白的解决办法
    EasySearcher搜索不到EasyNVR硬件的IP地址,如何解决?
    中间件未授权总结
    tomcat漏洞汇总
    weblogic漏洞汇总
    CF573EBear and Bowling【dp,平衡树】
    P4229某位歌姬的故事【dp】
    2109. 向字符串添加空格
    630. 课程表 III 贪心
    Flink官方文档学习(三):Standalone Cluster 集群部署 kylin
  • 原文地址:https://www.cnblogs.com/zxh1919/p/8127827.html
Copyright © 2020-2023  润新知