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

  • 相关阅读:
    LeetCode 275. H-Index II
    LeetCode 274. H-Index
    LeetCode Gray Code
    LeetCode 260. Single Number III
    LeetCode Word Pattern
    LeetCode Nim Game
    LeetCode 128. Longest Consecutive Sequence
    LeetCode 208. Implement Trie (Prefix Tree)
    LeetCode 130. Surrounded Regions
    LeetCode 200. Number of Islands
  • 原文地址:https://www.cnblogs.com/qiernonstop/p/4225949.html
Copyright © 2011-2022 走看看