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

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

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

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=3140E164A92ec6884b61b080e7bd973a"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/changeMore.js"></script>

         (1)单点转换

/**
 *  从数据库中获取到一条路线上100个点的经纬度坐标(google地图下的数据),经过百度地图api转换之后,正常显示在百度地图上。
 
 */


var result = new Array();
var pointArray = new Array();
var num =0;
var sum=0;

var map;
$(document).ready(function(){
	
	$("#pref").click(function(){
		if(top.showRouteMapPageSource=="route"){
			location.href = "/VehicleManagement/pageController/getRoute";
		}
		else{
			location.href="/VehicleManagement/pageController/addRouteStep4";
		}
		
	});
	
	map = new BMap.Map("allmap");
	map.enableScrollWheelZoom();

	
	pointArray=[];
	result=[];
	num = 0;
	//parent.stopIdArray中包含了一条路线上所有点的集合
	for(var i = 0;i<parent.stopIdArray.length;i++){
		var point = new BMap.Point(parent.stopLngArray[i],parent.stopLatArray[i]);	
		pointArray.push(point);
	}
	sum=pointArray.length;//一条路线上点的总数
	
	makeLine(map);
	
});

function makeLine() {
	  var gpsPoint=new BMap.Point(pointArray[num].lng, pointArray[num].lat);
    	// google转化为百度经纬度
	  BMap.Convertor.translate(gpsPoint,2,function (point){
											result.push(point);
											var marker = new BMap.Marker(result[num]); //创建marker
											map.addOverlay(marker);
											//一个个点转换的过程中记录已转换点的个数
											num++;
											if(num==sum){
												makepoly();  //在最后一次画线
											}else{
												makeLine();  //循环坐标转换,并不画线
											}
											
										});
}

function makepoly(){
	
	if(parent.stopIdArray.length%2==0){
		map.centerAndZoom(result[parent.stopIdArray.length/2], 14);
	}
	else{
		map.centerAndZoom(result[(parent.stopIdArray.length-1)/2], 14);
	}
	
	var polyline = new BMap.Polyline(result, {
		strokeColor : "blue",
		strokeWeight : 6,
		strokeOpacity : 0.5
	});
	map.addOverlay(polyline);
	
}




        (2 )批量转换

/**
 *  将一条路线的站点信息显示在地图上  批量转换google到baidu地图
 */


var result = new Array();
var pointArrays = new Array();
var num =0;
var sum=0;

var map;
$(document).ready(function(){
	
	$("#pref").click(function(){
		if(top.showRouteMapPageSource=="route"){
			location.href = "/VehicleManagement/pageController/getRoute";
		}
		else{
			location.href="/VehicleManagement/pageController/addRouteStep4";
		}
		
	});
	
	map = new BMap.Map("allmap");
	map.enableScrollWheelZoom();

	
	pointArrays=[];
	result=[];
	num = 0;

	var groupNum = 0;
	var pointArray = new Array();
	//parent.stopIdArray中包含了一条路线上所有点的集合,此处将点击分组,20个一组,批量坐标转换,提高效率
	for(var i = 0;i<parent.stopIdArray.length;i++){
		if(groupNum<20){
			var point = new BMap.Point(parent.stopLngArray[i],parent.stopLatArray[i]);	
			pointArray.push(point);//分成20个一组
			groupNum++;
			
		}else{
			sum++;
			pointArrays.push(pointArray);// 一个小组作为一个元素加入pointArrays,并将容器置空
			groupNum=0;
			pointArray=[];
		}
		
	}
	if(groupNum!=0){
		sum++;
		pointArrays.push(pointArray);//最后一组可能不足20个
	}
	count();//循环纠偏,并显示到地图上
	
});

//分组转换,每一组转换后的数据都加入到result中
function count() {
	  var gpsPoints=pointArrays[num];
    	// google转化为百度经纬度(参数2,表示是从GCJ-02坐标到百度坐标。参数0,表示是从GPS到百度坐标)
	  BMap.Convertor.transMore(gpsPoints,2,callback);
}
callback= function (points){
				var xyResult = null;
				 for(var index in points){
					  xyResult = points[index];
					  if(xyResult.error != 0){continue;}//出错就直接返回;
					  var point = new BMap.Point(xyResult.x, xyResult.y);
					  result.push(point);
				 }
				num++;//表示一组
//				alert(num);
				if(num==sum){ //最后的时候执行一次
					makepoly();
				}else{
					count(); //循环坐标转换,批量
				}
									
			}

function makepoly(){
//	alert(result.length);
	//图标
	for(var i=0;i<result.length;i++){
		var marker = new BMap.Marker(result[i]); //创建marker
		map.addOverlay(marker);
	}
	
	//地图居中,放大级别,不设置会出问题的。。
	if(parent.stopIdArray.length%2==0){
		map.centerAndZoom(result[parent.stopIdArray.length/2], 14);
	}
	else{
		map.centerAndZoom(result[(parent.stopIdArray.length-1)/2], 14);
	}
	
	//画线
	var polyline = new BMap.Polyline(result, {
		strokeColor : "blue",
		strokeWeight : 6,
		strokeOpacity : 0.5
	});
	map.addOverlay(polyline);
	
}






评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值