zoukankan      html  css  js  c++  java
  • 关于百度地图API的地图坐标转换问题

    我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准确度不怎么精确,偏差很大。这里我要更正下:

    国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上,进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度,需要通过坐标转换接口进行转换。

    由此可以看出小编之前冤枉了百度地图,所以如果对您有误导还请见谅。所以写了篇关于百度地图API坐标转换的文章,并且对之前的模型做了修正。

    实现代码:

    1 //在百度 map中显示地址
    2     var map = new BMap.Map("map_canvas");
    3     var point = new BMap.Point(longitudeP , latitudeP);  // 创建点坐标  
    4     map.centerAndZoom(point, 15);// 初始化地图,设置中心点坐标和地图级别  
    5     var marker = new BMap.Marker(point);    
    6     map.addOverlay(marker); 
    7     BMap.Convertor.translate(point,0,translateCallback);     //真实经纬度转成百度坐标

    回调函数代码:

    1 //坐标转换完之后的回调函数
    2 function translateCallback(point1){
    3     var marker1 = new BMap.Marker(point1);
    4     map.addOverlay(marker1);
    5     var label = new BMap.Label("转换后的百度坐标",{offset:new BMap.Size(20,-10)});
    6     marker1.setLabel(label); //添加百度label
    7     map.setCenter(point1);
    8 }

    这是新的效果图:

    可以看出转换出的效果还是相当精确的,并且从我这里的demo来看要比谷歌地图精确的多!所以如果也有像我一样的用户发现调用baidu map坐标有偏差的话,很有可能就是没有进行坐标转换。

    关于这个demo:

    在线查看demo 

    demo代码:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
     5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
     6 <title>GIS开发利用html5获取经纬度并在百度地图中查看</title>
     7 <!--加载百度 map api-->
     8 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=8827ee39511568ac0705d037d67b2624"></script>  
     9 <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
    10 </head>
    11 
    12 <body>
    13 <span id="support">将下面的经纬度输入谷歌地图:</span>
    14 <div id="show">
    15 纬度:<span id="latitude"></span><br />
    16 经度:<span id="longitude"></span><br />
    17 准确度:<span id="accuracy"></span>
    18 </div>
    19 <div id="map_canvas" style="500px; height:500px;"></div>
    20 <script type="text/javascript">
    21 var doc = document,
    22     latitude = doc.getElementById('latitude'),
    23     longitude = doc.getElementById('longitude'),
    24     accuracy = doc.getElementById('accuracy'),
    25     support = doc.getElementById('support'),
    26     showDiv = doc.getElementById('show');
    27 var map = new BMap.Map("map_canvas");
    28 function lodeSupport(){
    29     if(navigator.geolocation){
    30         support.innerHTML = '将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置:';
    31         showDiv.style.display = 'block';
    32         navigator.geolocation.getCurrentPosition(updataPosition);
    33     }else{
    34         support.innerHTML = '对不起,浏览器不支持!';
    35         showDiv.style.display = 'none';
    36     }
    37 }
    38 function updataPosition(position){
    39     var latitudeP = position.coords.latitude,
    40         longitudeP = position.coords.longitude,
    41         accuracyP = position.coords.accuracy;
    42     latitude.innerHTML = latitudeP;
    43     longitude.innerHTML = longitudeP;
    44     accuracy.innerHTML = accuracyP;
    45     //在百度 map中显示地址
    46     
    47     var point = new BMap.Point(longitudeP , latitudeP);  // 创建点坐标  
    48     map.centerAndZoom(point, 15);// 初始化地图,设置中心点坐标和地图级别  
    49     var marker = new BMap.Marker(point);    
    50     map.addOverlay(marker); 
    51     BMap.Convertor.translate(point,0,translateCallback);     //真实经纬度转成百度坐标
    52     
    53 }
    54 //坐标转换完之后的回调函数
    55 function translateCallback(point1){
    56     var marker1 = new BMap.Marker(point1);
    57     map.addOverlay(marker1);
    58     var label = new BMap.Label("转换后的百度坐标",{offset:new BMap.Size(20,-10)});
    59     marker1.setLabel(label); //添加百度label
    60     map.setCenter(point1);
    61 }
    62 
    63 window.addEventListener('load', lodeSupport , true);
    64 </script>
    65 </body>
    66 </html>

     转载自:http://malagis.com/baidu-maps-api-map-coordinate-conversion.html

  • 相关阅读:
    ORACLE B-TREE(B树)索引
    安装CentOS 6.4 64 位操作系统
    环境搭建(一)——linux 安装tomcat
    Linux基础
    sql必知必会
    Mysql基础
    shell编程基础
    Allpairs 正交分析工具的使用(测试用例设计)
    Sublime Text3配置SublimeREPL快捷键的方法(Python)
    XSS攻击及预防
  • 原文地址:https://www.cnblogs.com/qiernonstop/p/4225949.html
Copyright © 2011-2022 走看看