• 百度API实例——google地图数据转化为百度地图数据


         前段时间做的项目前端都是用Google地图,最近在一个地方需要用到百度地图,因为不同地图都有自己的处理,同一个经纬度在不同地图上显示的位置并不相同,因此,要把以前的数据直接拿过来用需要做一个转换。查阅百度地图的js API之后发现有直接从google到baidu的转换api,不错啊,于是自己做了两个实例来记录一下,以后再用到也可以看看。

            首先,转换api大致有两种,一个是单点转换,一个是批量坐标转换(好像一次能转换20个点左右,具体没深入查看),这里写了两个js程序,详见下面两个实例的部分代码:先加上相应的js库,

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=3140E164A92ec6884b61b080e7bd973a"></script>  
    2. <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/changeMore.js"></script>  


             (1)单点转换

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. /**  
    2.  *  从数据库中获取到一条路线上100个点的经纬度坐标(google地图下的数据),经过百度地图api转换之后,正常显示在百度地图上。  
    3.    
    4.  */  
    5.   
    6.   
    7. var result = new Array();  
    8. var pointArray = new Array();  
    9. var num =0;  
    10. var sum=0;  
    11.   
    12. var map;  
    13. $(document).ready(function(){  
    14.       
    15.     $("#pref").click(function(){  
    16.         if(top.showRouteMapPageSource=="route"){  
    17.             location.href = "/VehicleManagement/pageController/getRoute";  
    18.         }  
    19.         else{  
    20.             location.href="/VehicleManagement/pageController/addRouteStep4";  
    21.         }  
    22.           
    23.     });  
    24.       
    25.     map = new BMap.Map("allmap");  
    26.     map.enableScrollWheelZoom();  
    27.   
    28.       
    29.     pointArray=[];  
    30.     result=[];  
    31.     num = 0;  
    32.     //parent.stopIdArray中包含了一条路线上所有点的集合  
    33.     for(var i = 0;i<parent.stopIdArray.length;i++){  
    34.         var point = new BMap.Point(parent.stopLngArray[i],parent.stopLatArray[i]);    
    35.         pointArray.push(point);  
    36.     }  
    37.     sum=pointArray.length;//一条路线上点的总数  
    38.       
    39.     makeLine(map);  
    40.       
    41. });  
    42.   
    43. function makeLine() {  
    44.       var gpsPoint=new BMap.Point(pointArray[num].lng, pointArray[num].lat);  
    45.         // google转化为百度经纬度  
    46.       BMap.Convertor.translate(gpsPoint,2,function (point){  
    47.                                             result.push(point);  
    48.                                             var marker = new BMap.Marker(result[num]); //创建marker  
    49.                                             map.addOverlay(marker);  
    50.                                             //一个个点转换的过程中记录已转换点的个数  
    51.                                             num++;  
    52.                                             if(num==sum){  
    53.                                                 makepoly();  //在最后一次画线  
    54.                                             }else{  
    55.                                                 makeLine();  //循环坐标转换,并不画线  
    56.                                             }  
    57.                                               
    58.                                         });  
    59. }  
    60.   
    61. function makepoly(){  
    62.       
    63.     if(parent.stopIdArray.length%2==0){  
    64.         map.centerAndZoom(result[parent.stopIdArray.length/2], 14);  
    65.     }  
    66.     else{  
    67.         map.centerAndZoom(result[(parent.stopIdArray.length-1)/2], 14);  
    68.     }  
    69.       
    70.     var polyline = new BMap.Polyline(result, {  
    71.         strokeColor : "blue",  
    72.         strokeWeight : 6,  
    73.         strokeOpacity : 0.5  
    74.     });  
    75.     map.addOverlay(polyline);  
    76.       
    77. }  

            (2 )批量转换

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
      1. /**  
      2.  *  将一条路线的站点信息显示在地图上  批量转换google到baidu地图  
      3.  */  
      4.   
      5.   
      6. var result = new Array();  
      7. var pointArrays = new Array();  
      8. var num =0;  
      9. var sum=0;  
      10.   
      11. var map;  
      12. $(document).ready(function(){  
      13.       
      14.     $("#pref").click(function(){  
      15.         if(top.showRouteMapPageSource=="route"){  
      16.             location.href = "/VehicleManagement/pageController/getRoute";  
      17.         }  
      18.         else{  
      19.             location.href="/VehicleManagement/pageController/addRouteStep4";  
      20.         }  
      21.           
      22.     });  
      23.       
      24.     map = new BMap.Map("allmap");  
      25.     map.enableScrollWheelZoom();  
      26.   
      27.       
      28.     pointArrays=[];  
      29.     result=[];  
      30.     num = 0;  
      31.   
      32.     var groupNum = 0;  
      33.     var pointArray = new Array();  
      34.     //parent.stopIdArray中包含了一条路线上所有点的集合,此处将点击分组,20个一组,批量坐标转换,提高效率  
      35.     for(var i = 0;i<parent.stopIdArray.length;i++){  
      36.         if(groupNum<20){  
      37.             var point = new BMap.Point(parent.stopLngArray[i],parent.stopLatArray[i]);    
      38.             pointArray.push(point);//分成20个一组  
      39.             groupNum++;  
      40.               
      41.         }else{  
      42.             sum++;  
      43.             pointArrays.push(pointArray);// 一个小组作为一个元素加入pointArrays,并将容器置空  
      44.             groupNum=0;  
      45.             pointArray=[];  
      46.         }  
      47.           
      48.     }  
      49.     if(groupNum!=0){  
      50.         sum++;  
      51.         pointArrays.push(pointArray);//最后一组可能不足20个  
      52.     }  
      53.     count();//循环纠偏,并显示到地图上  
      54.       
      55. });  
      56.   
      57. //分组转换,每一组转换后的数据都加入到result中  
      58. function count() {  
      59.       var gpsPoints=pointArrays[num];  
      60.         // google转化为百度经纬度(参数2,表示是从GCJ-02坐标到百度坐标。参数0,表示是从GPS到百度坐标)  
      61.       BMap.Convertor.transMore(gpsPoints,2,callback);  
      62. }  
      63. callback= function (points){  
      64.                 var xyResult = null;  
      65.                  for(var index in points){  
      66.                       xyResult = points[index];  
      67.                       if(xyResult.error != 0){continue;}//出错就直接返回;  
      68.                       var point = new BMap.Point(xyResult.x, xyResult.y);  
      69.                       result.push(point);  
      70.                  }  
      71.                 num++;//表示一组  
      72. //              alert(num);  
      73.                 if(num==sum){ //最后的时候执行一次  
      74.                     makepoly();  
      75.                 }else{  
      76.                     count(); //循环坐标转换,批量  
      77.                 }  
      78.                                       
      79.             }  
      80.   
      81. function makepoly(){  
      82. //  alert(result.length);  
      83.     //图标  
      84.     for(var i=0;i<result.length;i++){  
      85.         var marker = new BMap.Marker(result[i]); //创建marker  
      86.         map.addOverlay(marker);  
      87.     }  
      88.       
      89.     //地图居中,放大级别,不设置会出问题的。。  
      90.     if(parent.stopIdArray.length%2==0){  
      91.         map.centerAndZoom(result[parent.stopIdArray.length/2], 14);  
      92.     }  
      93.     else{  
      94.         map.centerAndZoom(result[(parent.stopIdArray.length-1)/2], 14);  
      95.     }  
      96.       
      97.     //画线  
      98.     var polyline = new BMap.Polyline(result, {  
      99.         strokeColor : "blue",  
      100.         strokeWeight : 6,  
      101.         strokeOpacity : 0.5  
      102.     });  
      103.     map.addOverlay(polyline);  
      104.       
      105. }  
  • 相关阅读:
    [转]在 javascript 按键事件中,按键值的对照表
    表达式树(Expression Tree)
    WPF之路——用户控件对比自定义控件UserControl VS CustomControl)
    wpf创建用户控件(计时器控件)
    WPF 命令
    WPF自定义DataGrid分页控件
    WPF ----在UserControl的xaml里绑定依赖属性
    wpf 自定义ListBox
    WPF 自定义NotifyPropertyChanged
    WPF 使用附加属性增加控件属性
  • 原文地址:https://www.cnblogs.com/telwanggs/p/6483433.html
Copyright © 2020-2023  润新知