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

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

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

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）单点转换

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

（2 ）批量转换

1. /**
2. *  将一条路线的站点信息显示在地图上  批量转换google到baidu地图
3. */
4. var result = new Array();
5. var pointArrays = new Array();
6. var num =0;
7. var sum=0;
8. var map;
9. $(document).ready(function(){
10. $("#pref").click(function(){
11. if(top.showRouteMapPageSource=="route"){
12. location.href = "/VehicleManagement/pageController/getRoute";
13. }
14. else{
15. location.href="/VehicleManagement/pageController/addRouteStep4";
16. }
17. });
18. map = new BMap.Map("allmap");
19. map.enableScrollWheelZoom();
20. pointArrays=[];
21. result=[];
22. num = 0;
23. var groupNum = 0;
24. var pointArray = new Array();
25. //parent.stopIdArray中包含了一条路线上所有点的集合，此处将点击分组，20个一组，批量坐标转换，提高效率
26. for(var i = 0;i<parent.stopIdArray.length;i++){
27. if(groupNum<20){
28. var point = new BMap.Point(parent.stopLngArray[i],parent.stopLatArray[i]);
29. pointArray.push(point);//分成20个一组
30. groupNum++;
31. }else{
32. sum++;
33. pointArrays.push(pointArray);// 一个小组作为一个元素加入pointArrays，并将容器置空
34. groupNum=0;
35. pointArray=[];
36. }
37. }
38. if(groupNum!=0){
39. sum++;
40. pointArrays.push(pointArray);//最后一组可能不足20个
41. }
42. count();//循环纠偏,并显示到地图上
43. });
44. //分组转换，每一组转换后的数据都加入到result中
45. function count() {
46. var gpsPoints=pointArrays[num];
47. // google转化为百度经纬度(参数2，表示是从GCJ-02坐标到百度坐标。参数0，表示是从GPS到百度坐标)
48. BMap.Convertor.transMore(gpsPoints,2,callback);
49. }
50. callback= function (points){
51. var xyResult = null;
52. for(var index in points){
53. xyResult = points[index];
54. if(xyResult.error != 0){continue;}//出错就直接返回;
55. var point = new BMap.Point(xyResult.x, xyResult.y);
56. result.push(point);
57. }
58. num++;//表示一组
59. //              alert(num);
60. if(num==sum){ //最后的时候执行一次
61. makepoly();
62. }else{
63. count(); //循环坐标转换，批量
64. }
65. }
66. function makepoly(){
67. //  alert(result.length);
68. //图标
69. for(var i=0;i<result.length;i++){
70. var marker = new BMap.Marker(result[i]); //创建marker
71. map.addOverlay(marker);
72. }
73. //地图居中，放大级别，不设置会出问题的。。
74. if(parent.stopIdArray.length%2==0){
75. map.centerAndZoom(result[parent.stopIdArray.length/2], 14);
76. }
77. else{
78. map.centerAndZoom(result[(parent.stopIdArray.length-1)/2], 14);
79. }
80. //画线
81. var polyline = new BMap.Polyline(result, {
82. strokeColor : "blue",
83. strokeWeight : 6,
84. strokeOpacity : 0.5
85. });
86. map.addOverlay(polyline);
87. }