微信小程序 地图坐标转换 wgs84TOgcj02

项目需求

  1. 获取用户(小程序)位置信息——wgs84 返回 gps 坐标,gcj02 返回国测局坐标系
  2. 发送位置信息至设备(设备仅支持wgs84 GPS坐标系
  3. 设备发送轨迹至小程序,小程序接收轨迹信息并绘制出来(微信内嵌地图仅支持gcj02 国测局坐标系

坐标转换方案

1、获取用户(小程序)wgs84 GPS坐标系位置信息
2、收到设备轨迹后转换为gcj02 国测局坐标系位置信息再绘制

1、获取用户(小程序)wgs84 GPS坐标系位置信息

微信官方文档 wx.getLocation(Object object)

wx.getLocation({
    type: 'wgs84',//wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
    altitude:true,//高精度定位
    //定位成功,更新定位结果
    success: function (res) {
      var latitudee = res.latitude
      var longitudee = res.longitude
      that.setData({
        longitude:parseFloat(longitudee),
        latitude: parseFloat(latitudee),
      })
    },
    //定位失败回调
    fail:function(){
      wx.showToast({
        title:"定位失败",
        icon:"none"
      })
    },
  complete:function(){
    //隐藏定位中信息进度
    wx.hideLoading()
  }
  })
2、收到设备轨迹后转换为gcj02 国测局坐标系位置信息再绘制

腾讯位置服务 开发指南-坐标转换
输入的locations的坐标类型,可选值:

  1. GPS坐标
  2. sogou经纬度
  3. baidu经纬度
  4. mapbar经纬度
  5. sogou墨卡托

官方示例

申请开发者密钥(Key):key是调用API的身份标识,作为必填参数之一传递给API接口
配额常见问题:如果显示接口调用已达上限去分配一下key额度即可(配额管理-账号额度-坐标转换-配额分配)

微信官方文档 wx.request(Object object)

// 坐标转换 wgs84TOgcj02
    var roadpoint = jsonObj.car.roadpoint//jsonObj.car.roadpoint接收到的路线 数组格式
    //处理数据,以便使用参数值进行URL编码
    var requestSend = []
    //遍历路线中所有点,使其满足 a_lat,a_lng;b_lat,b_lng;c_lat,c_lng...格式
    for (var i in roadpoints) {
      var requestSend_O = roadpoints[i].latitude+","+roadpoints[i].longitude
      requestSend = requestSend.concat(requestSend_O)//组合requestSend和requestSend_O
      }
      requestSend = requestSend.join(';')//数组转字符串 将数组元素连接起来以构建一个字符串	可以随意设定分隔符 这里按调用需要设置为';'
    wx.request({
      url: 'https://apis.map.qq.com/ws/coord/v1/translate?locations='+requestSend+'&type=1&key=*****-*****-*****-*****-*****-*****',//请求的接口地址,必须基于https协议
      method: 'get', //请求的方式
      success: (res) => {//请求成功之后的回调函数
          console.log(res)//查看真实数据 console.log(res.data)
          var Points_O=[]
          for (var i in res.data.locations) {
            var points_0={latitude: res.data.locations[i].lat,
                longitude: res.data.locations[i].lng},
                Points_O = Points_O.concat(points_0)
              }
          this.setData({
            polyline:[{
              points:Points_O,
              color:"#57b676",
              width: 5,
              arrowLine: true,//是否带箭头
              borderWidth:2
                //  dottedLine: true
              }],
            })
          }
  })
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值