腾讯地图逆地址解析的签名校验报错的解决方法---vue-jsonp

最新推荐文章于 2024-05-02 11:47:29 发布

QS8945

最新推荐文章于 2024-05-02 11:47:29 发布

阅读量85

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qs8945/article/details/138159745

版权

npm i js-md5 -S
npm i vue-jsonp -S

import md5 from 'js-md5'
import { jsonp } from 'vue-jsonp'

async getVehiclePosition(row) {
  row.latitude = 39.98406
  row.longitude = 116.30752
  if (row.latitude && row.longitude) {
    let res = await this.getGeoCoder({
      location: row.latitude + ',' + row.longitude,
      key: '************************************',
      SK: '************************************'
    })
    if (res.status === 0) {
      let locationName = res.result.address
    } else {
      showToast(res.message, 'warning')
    }
  }
}

getGeoCoder(param) {
      let sig = md5(
        `/ws/geocoder/v1?callback=jsonpCallback&key=${param.key}&location=${param.location}&output=jsonp${param.SK}`
      )
      // sig = encodeURI(sig) //url化一下
      let getData = {
        callbackQuery: 'callback', // 设置callback参数的key  不设置的话callback参数会自动被赋予一个随机值  md5校验无法通过
        callbackName: 'jsonpCallback', // 设置callback 参数的值
        key: param.key,
        location: param.location,
        output: 'jsonp',
        sig
      }
      //签名失败的解决办法 https://lbs.qq.com/faq/serverFaq/webServiceKey
      return jsonp('https://apis.map.qq.com/ws/geocoder/v1', getData)
    }