[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坐标系之间的转换

[WebGIS] HTML5跟踪GPS轨迹(7)VueJS引入百度地图 [WebGIS] HTML5跟踪GPS轨迹(9)查看走过的轨迹

作者:,GIS爱好者。
分享本文,请您带上本文链接
分享到:

发表评论