• 使用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>  
     
  • 相关阅读:
    什么样的代码称得上是好代码?
    九年程序人生 总结分享
    Docker入门 第一课 --.Net Core 使用Docker全程记录
    阿里云 Windows Server 2012 r2 部署asp.net mvc网站 平坑之旅
    Visual studio 2015 Community 安装过程中遇到问题的终极解决
    Activiti6.0 spring5 工作流引擎 java SSM流程审批 项目框架
    java 进销存 库存管理 销售报表 商户管理 springmvc SSM crm 项目
    Leetcode名企之路
    24. 两两交换链表中的节点
    21. 合并两个有序链表
  • 原文地址:https://www.cnblogs.com/zxh1919/p/8127827.html
Copyright © 2020-2023  润新知