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

换了种使用腾讯地图的方式,不设置域名白名单，可以不用反复再后台添加白名单了，直接使用get请求的jsonp方式，遇到了一些问题，现在记录下来,点击地图用经纬度换取地址信息

 "vue-jsonp": "^2.0.0",

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

const clickHandler = async function (evt) {
    var lat = evt.latLng.getLat().toFixed(6);
    var lng = evt.latLng.getLng().toFixed(6);
    console.log("您点击的的坐标是：" + lat + "," + lng);
    let res = await getGeoCoder({
        latitude: lat,
        longitude: lng,
        location: lat + ',' + lng,
        key: 'XXUBZ-PFT65-',
        // get_poi: 1,
        SK: '4xxxxxxxxxxxxxxxxxxxxxxx'
    })
    console.log(res, '获取地理位置')
    if (res.status == 0) {
        message.success(res.message)
        data.formState.address = res.result.address
        data.formState.latitude = res.result.location.lat
        data.formState.longitude = res.result.location.lng
    } else {
        message.error(res.message)
    }
}

对应接口方法

export const getGeoCoder = (param) => {
    let sig = md5(`/ws/geocoder/v1?callback=jsonpCallback&key=${param.key}&location=${param.latitude},${param.longitude}&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)
}

最后就能，拿取到地址了