gps坐标转换成百度坐标显示路线图
之前有接触过一个项目，大致要求是有一系列GPS坐标（有时间顺序），要求在百度地图上标记出这些点，画出轨迹图。
首先有一点要明确，百度地图上的GPS坐标（百度坐标）是对原始GPS坐标经过一些计算后得到的，所以我们如果想要在百度地图上正确描绘我们所需要的点，我们必须先将手上的GPS坐标转换成百度地图的坐标，再通过new BMap.Point（lng,lat）去添加标记点。转换成百度坐标需要用到BMap.Convertor.translate(gpsPoint,0,translateCallback)函数，需要引用。
由于坐标转换translate函数执行是一个异步的过程，我们无法控制它的执行顺序，所以在对一系列坐标同时进行处理时，无法按照我们想要的顺序在回调函数中对数据进行处理，这里必须对translate函数做一些改进，其实一个标志位就足够了。下面贴出改进后的convertor.js代码。
(function(){ //闭包
function load_script(xyUrl, callback){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = xyUrl;
//借鉴了jQuery的script跨域方法
script.onload = script.onreadystatechange = function(){
if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){
callback && callback();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if ( head && script.parentNode ) {
head.removeChild( script );
}
}
};
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
head.insertBefore( script, head.firstChild );
}
function translate(point,type,callback,X){
var callbackName = 'cbk_' + Math.round(Math.random() * 10000); //随机函数名
var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from="+ type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName;
//动态创建script标签
load_script(xyUrl);
BMap.Convertor[callbackName] = function(xyResult){
delete BMap.Convertor[callbackName]; //调用完需要删除改函数
var point = new BMap.Point(xyResult.x, xyResult.y);
callback && callback(point,X);
}
}
window.BMap = window.BMap || {};
BMap.Convertor = {};
BMap.Convertor.translate = translate;
})();下面附上自定义的js文件代码：
var L=0;//标识是第几个
var Json =[];//接受转换了的百度坐标
var hashMap = { //自定义创建的hasmap 装载转换后的坐标值
Set : function(key,value){this[key] = value},
Get : function(key){return this[key]},
Contains : function(key){return this.Get(key) == null?false:true},
Remove : function(key){delete this[key]}
}
//入口函数
function SetMarkPoint(data) {
map.clearOverlays();
//例如 设置这样一个字符串并拆分成数组对象 ，里面的是GPS坐标，转换成百度坐标后按顺序显示在地图上并且点之间用带箭头的红线
var K=data.length;//标示符判断最后K、L是否相等
for(var i=0;ipixelStart.y){
pixelTemY=pixelEnd.y-r;
}else{
pixelTemY=pixelEnd.y+r;
}
//已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
pixelX=pixelTemX-r*Math.tan(angle);
pixelX1=pixelTemX+r*Math.tan(angle);
pixelY=pixelY1=pixelTemY;
}else{ //斜率存在时
delta=(pixelEnd.y-pixelStart.y)/(pixelEnd.x-pixelStart.x);
param=Math.sqrt(delta*delta+1);
if((pixelEnd.x-pixelStart.x)<0){ //第二、三象限
pixelTemX=pixelEnd.x+ r/param;
pixelTemY=pixelEnd.y+delta*r/param;
}else{//第一、四象限
pixelTemX=pixelEnd.x- r/param;
pixelTemY=pixelEnd.y-delta*r/param;
}
//已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
pixelX=pixelTemX+ Math.tan(angle)*r*delta/param;
pixelY=pixelTemY-Math.tan(angle)*r/param;
pixelX1=pixelTemX- Math.tan(angle)*r*delta/param;
pixelY1=pixelTemY+Math.tan(angle)*r/param;
}
var pointArrow=map.pixelToPoint(new BMap.Pixel(pixelX,pixelY));
var pointArrow1=map.pixelToPoint(new BMap.Pixel(pixelX1,pixelY1));
var Arrow = new BMap.Polyline([pointArrow,linePoint[i],pointArrow1], {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.9});
map.addOverlay(Arrow);
}
} 最后附上简易的效果图(直线的颜色及大小都可调整)：
