vue3 腾讯地图 WebServiceAPI 使用签名检验 jsonp获取数据

腾讯WebServiceAPI的使用准备

链接: 腾讯位置服务控制台

到应用管理->我的应用去创建应用
然后添加key


这里用的是签名校验的方式，
然后就获得了一个key

以及一个Secret key（ SK ）

我使用的是jsonp的请求方式，避免跨域报错

安装vue-jsonp

npm i vue-jsonp

引入vue-jsonp

//main.js
//用的是vue3 挂载到vue上的方式与vue2不太一样
//我是局部引入使用的，这里全局挂载 没有试过，大概是这样吧
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

import { jsonp } from 'vue-jsonp'
app.config.globalProperties.$jsonp = jsonp

//以下是全局引入示例
	this.$jsonp('请求地址', {
		//参数示例
        key:'sss-sss-ss-ss-ss'
    })

//这里是局部引入  以及 使用示例
import { jsonp } from 'vue-jsonp'
	jsonp('请求地址', {
		//参数示例
        key:'sss-sss-ss-ss-ss'
    })

腾讯WebServiceAPI的使用

这里使用获取ip定位的接口作为示例

import md5 from 'js-md5'
import { jsonp } from 'vue-jsonp'
//根据文档先通过Secret key与请求参数拼接 经过md5生成sig
// 这是请求地址/ws/location/v1/ip
//加?以及参数callback=jsonpCallback
//这是随便写的示例Secret key    SDFXXXXSSS
//和get传参一样，参数与参数之间用&分割
//最后拼接Secret key这个直接拼上，不需要和前面的东西有分割
let sig = md5('/ws/location/v1/ip?callback=jsonpCallback&key=QHVBZ-***********-WYB6W&output=jsonpSDFXXXXSSS')
    sig = encodeURI(sig)//url化一下
    console.log('md5', sig)
    jsonp('https://apis.map.qq.com/ws/location/v1/ip', {
    //重点来了
    //腾讯的api上有个callback参数，这是使用指定回调函数
    //使用vue-jsonp时这个参数需要通过callbackQuery和callbackName来设置
    //否vue-jsonp会随机生成一个callback参数这样无论怎么弄都会报签名校验失败
        callbackQuery: 'callback', // 设置callback参数的key  不设置的话callback参数会自动被赋予一个随机值  md5校验无法通过
        callbackName: 'jsonpCallback', // 设置callback 参数的值
		//其他参数正常传
        key: 'QH****8*****YB6W',
        output: 'jsonp',
        sig: sig
    })
        .then(res => {
            console.log('ip地址', res)
        })