[WebGIS] HTML5跟踪GPS轨迹（8）再谈百度地图的坐标转换（V2版）

在之前的文章《百度地图坐标转换（gps google 百度坐标相互转换》中我曾经简单介绍过百度地图中坐标转换的“坑”。这次在写这个示例的时候发现百度地图JS-API V2发布了，而在新的百度地图JS-API中直接增加了对坐标转换的支持，不需要之前需要引入一个converter.js。

使用方法

下面是一个简单的使用示例。

var convertor = new BMap.Convertor();
convertor.translate(pointArr, 3, 5, translateCallback)

//坐标转换完之后的回调函数
translateCallback = function (data){
  if(data.status === 0) {
    //do something
  }
}

其中translateCallback表示转换成功之后的回调函数,pointArr表示要转换的数据数组，注意数据长度不能超过10个。第二三个参数 3,5表示从google坐标转换百度坐标，1,5表示从GPS坐标转换百度坐标。

官方示例

你可以查看这里：地图API示例

官方示例演示了google坐标->百度坐标， GPS坐标->百度坐标，以及批量转换坐标转换的方法。

google坐标->百度坐标

// 百度地图API功能
//谷歌坐标
var x = 116.32715863448607;
var y = 39.990912172420714;
var ggPoint = new BMap.Point(x,y);

//地图初始化
var bm = new BMap.Map("allmap");
bm.centerAndZoom(ggPoint, 15);
bm.addControl(new BMap.NavigationControl());

//添加谷歌marker和label
var markergg = new BMap.Marker(ggPoint);
bm.addOverlay(markergg); //添加谷歌marker
var labelgg = new BMap.Label("未转换的谷歌标注（错误）",{offset:new BMap.Size(20,-10)});
markergg.setLabel(labelgg); //添加谷歌label

//坐标转换完之后的回调函数
translateCallback = function (data){
  if(data.status === 0) {
    var marker = new BMap.Marker(data.points[0]);
    bm.addOverlay(marker);
    var label = new BMap.Label("转换后的百度标注（正确）",{offset:new BMap.Size(20,-10)});
    marker.setLabel(label); //添加百度label
    bm.setCenter(data.points[0]);
  }
}

setTimeout(function(){
    var convertor = new BMap.Convertor();
    var pointArr = [];
    pointArr.push(ggPoint);
    convertor.translate(pointArr, 3, 5, translateCallback)
}, 1000);

效果图：

GPS坐标->百度坐标

// 百度地图API功能
//GPS坐标
var x = 116.32715863448607;
var y = 39.990912172420714;
var ggPoint = new BMap.Point(x,y);

//地图初始化
var bm = new BMap.Map("allmap");
bm.centerAndZoom(ggPoint, 15);
bm.addControl(new BMap.NavigationControl());

//添加gps marker和label
var markergg = new BMap.Marker(ggPoint);
bm.addOverlay(markergg); //添加GPS marker
var labelgg = new BMap.Label("未转换的GPS坐标（错误）",{offset:new BMap.Size(20,-10)});
markergg.setLabel(labelgg); //添加GPS label

//坐标转换完之后的回调函数
translateCallback = function (data){
  if(data.status === 0) {
    var marker = new BMap.Marker(data.points[0]);
    bm.addOverlay(marker);
    var label = new BMap.Label("转换后的百度坐标（正确）",{offset:new BMap.Size(20,-10)});
    marker.setLabel(label); //添加百度label
    bm.setCenter(data.points[0]);
  }
}

setTimeout(function(){
    var convertor = new BMap.Convertor();
    var pointArr = [];
    pointArr.push(ggPoint);
    convertor.translate(pointArr, 1, 5, translateCallback)
}, 1000);

效果图：

坐标批量转换

var points = [new BMap.Point(116.3786889372559,39.90762965106183),
              new BMap.Point(116.38632786853032,39.90795884517671),
              new BMap.Point(116.39534009082035,39.907432133833574),
              new BMap.Point(116.40624058825688,39.90789300648029),
              new BMap.Point(116.41413701159672,39.90795884517671)
];

//地图初始化
var bm = new BMap.Map("allmap");
bm.centerAndZoom(new BMap.Point(116.378688937,39.9076296510), 15);

//坐标转换完之后的回调函数
translateCallback = function (data){
  if(data.status === 0) {
    for (var i = 0; i < data.points.length; i++) {
        bm.addOverlay(new BMap.Marker(data.points[i]));
        bm.setCenter(data.points[i]);
    }
  }
}
setTimeout(function(){
    var convertor = new BMap.Convertor();
    convertor.translate(points, 1, 5, translateCallback)
}, 1000);

效果图：

需要注意的是，批量转换接口一次只支持最多10个坐标，坐标多的话需要多次调用这个接口。

其他

另外还有大神封装好的库方法，可以直接使用，这里也推荐一下。

wandergis/coordtransform: 提供了百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换