腾讯坐标系转化成百度坐标系

目录

需求描述：

1、通过数学公式计算后转换。

1.1、腾讯/高德地图经纬度转换成百度经纬度

1.2、百度经纬度转换成腾讯/高德地图经纬度

2、利用官方提供的api文档进行转换。

2.1、腾讯坐标系转换成百度坐标系。

2.2、百度等其他坐标系，转腾讯坐标系。

验证结果：

---

需求描述：

不同坐标系之间的转化是比较常见的需求，今天恰好我也遇到了一个相关场景。

要求是讲小程序传来的腾讯坐标系转换成百度坐标系，再传给后台。

经过查阅相关资料后，发现主要有以下2种方式：

1、通过数学公式计算后转换。

搜索出来的大部分结果都是以下公式转换而成，因此做个记录。

1.1、腾讯/高德地图经纬度转换成百度经纬度

function qqMapTransBMap(lng, lat) {
      let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
      let x = lng;
      let y = lat;
      let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
      let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
      let lngs = z * Math.cos(theta) + 0.0065;
      let lats = z * Math.sin(theta) + 0.006;
     
      return {
          lng: lngs,
          lat: lats 
      } 
}

1.2、百度经纬度转换成腾讯/高德地图经纬度

function bMapTransQQMap(lng, lat) {
      let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
      let x = lng - 0.0065;
      let y = lat - 0.006;
      let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
      let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
      let lngs = z * Math.cos(theta);
      let lats = z * Math.sin(theta);
      
      return {
          lng: lngs,
          lat: lats        
      }   
}

但是我经过查证和实践，发现这种方式转换的结果和通过官方api转换出来的总有偏差，因为我还是更偏向于方法二。

2、利用官方提供的api文档进行转换。

2.1、腾讯坐标系转换成百度坐标系。

腾讯转百度，那么这里自然使用的就是百度的api。

这里需要注意的是，请仔细看清楚，你引入的百度api是JSAPI WebGL的api，还是JavaScript API，他们对应的核心类的命名空间不同，使用方式也不同，类参考文档也不同，需要注意区分。

JSAPI WebGL引入时的script标签中的src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"

而JavaScript API引入时的script标签中的src="//api.map.baidu.com/api?v=3.0&ak=您的密钥"

这里我使用的是JavaScript API v3.0

废话少说，上代码：

<template>
  <div></div>
</template>

<script>

export default {
  name: 'TranslateToBaidu',
  created () {
    this.translateTencentToBaidu()
  },
  // 方法集合
  methods: {
    InitBMap () {
      return new Promise((resolve, reject) => {
        window.initialize = () => {
          resolve(window.BMap)
        }
        const ak = 'xxxxxxxxxxxxxxxxxxxxxxx' // 个人的
        var script = document.createElement('script')
        // 当脚本加载完成后callback函数会被立刻调用
        script.src = `https://api.map.baidu.com/api?v=3.0&ak=${ ak }&callback=initialize`
        document.body.appendChild(script)
      })
    },
    // 通过百度api，将腾讯坐标系转换成百度坐标系，腾讯是google系的坐标。
    translateTencentToBaidu () {
      this.InitBMap().then(BMap => {
        const longitude = 114.34253
        const latitude = 30.49984
        const targetPoint = new BMap.Point(longitude, latitude)
        const convertor = new BMap.Convertor()
        let pointArr = []
        pointArr.push(targetPoint)
        // https://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition 中的服务文档，可查看1-5的含义。
        convertor.translate(pointArr, 3, 5, data => {
          console.log('转换完毕之后的点位数组为', data.points[0])
        })
      })
    }
  }
}
</script>

convertor.translate()方法的用法，在JavaScript API v3.0的类参考文档中很容易找到：

translate(points: Array<BMap.Point>, from: number, to: number, callback: function)

但是其中的参数from和to的含义居然显示的是请参照Web服务API，诶，找了半天才找到。

地址为：Web服务API | 百度地图API SDK

切换到服务文档一栏，即可看的很清晰：

from	源坐标类型： 1：GPS标准坐标（wgs84）； 2：搜狗地图坐标； 3：火星坐标（gcj02），即高德地图、腾讯地图和MapABC等地图使用的坐标； 4：3中列举的地图坐标对应的墨卡托平面坐标; 5：百度地图采用的经纬度坐标（bd09ll）； 6：百度地图采用的墨卡托平面坐标（bd09mc）; 7：图吧地图坐标； 8：51地图坐标；	int	1	1	否
to	目标坐标类型： 3：火星坐标（gcj02），即高德地图、腾讯地图及MapABC等地图使用的坐标； 5：百度地图采用的经纬度坐标（bd09ll）； 6：百度地图采用的墨卡托平面坐标（bd09mc）；	int	5	5	否

再结合示例demo，很容易的进行相关转换：

地图JS API示例 | 百度地图开放平台

把示例demo中的convertor.translate(pointArr, 1, 5, translateCallback)改成

convertor.translate(pointArr, 3, 5, translateCallback)，即可完成对应转换。

举一反三，同理还有GPS转百度，搜狗地图转百度之类的用法，换下from即可。

2.2、百度等其他坐标系，转腾讯坐标系。

其实在2.1中我的需求目标已经达成了，那为什么还要反向转化一遍呢？

当然是不放心啊，毕竟你转了也不知道对错。

最好的验证方式是腾讯转百度，再百度转回腾讯，看看误差大不大就知道了。

而且腾讯地图的demo示例文档写得很清晰，用法也非常简单。

结合官方demo和相关api说明，很容易进行验证：

坐标转换 | 腾讯位置服务腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案；有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。https://lbs.qq.com/webDemoCenter/javascriptV2/libraries/convertorLibrary

qq.maps.convertor.translate()方法的参数说明：

方法	返回值	说明
translate(points:LatLng | Point | Array.<LatLng> | Array.<Point>, type:Number, callback:Function)	none	将其他地图服务商的坐标批量转换成腾讯地图经纬度坐标。type用于说明是哪个服务商的坐标。 type的可选值为 1：gps经纬度；2：搜狗经纬度；3：百度经纬度；4：mapbar经纬度；5：google经纬度；6：搜狗墨卡托。

验证结果：

腾讯坐标转百度验证：
转化前的腾讯坐标：latitude=30.49984，longitude=114.34253
转化后的百度坐标：latitude=30.50605369137788，longitude=114.34899083831567

百度坐标转腾讯验证：
转化前的百度坐标：latitude=30.50605369137788，longitude=114.34899083831567
转化后的腾讯坐标：latitude=30.499841, longitude=114.34253

可以看到结果非常接近，比方法1要精准太多！

因此墙裂推荐使用此种方法