vue 使用 vue-jsonp插件调用腾讯地图api

最近有个vue3项目需要调用腾讯地图api,通过详细地址返回指定地址的经纬度，在调用时发现无论怎么调都有问题，经过了一系列的尝试和百度后终于总结出一套能够走通的方法，现在分享给大家。
安装vue-jsonp

npm i vue-jsonp -D

// HelloWorld.vue
import {jsonp} from 'vue-jsonp';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    const params = {
      headers: {"content-type": "application/xml"},
      callbackQuery: "callbackParam",
      callbackName: "jsonpCallback"
    }
    //注意这里的地址参数需要连接起来中间不要有空格或者换行
    let url = `https://apis.map.qq.com/ws/geocoder/v1/?address=北京市海淀区彩和坊路海淀西大街74号&key=yourkey&output=jsonp&callback="jsonpCallback`; 
    jsonp(url, params).then(res => {
      console.log('res',res);
    }).catch(err => {
      console.log('err', err);
    })
  }
}

因为之前百度好多都是说的vue2项目引用vue-jsonp 插件，结果引用之后发现不好用，
这里 主要是这句话

//若单独在.vue文件中引入可以使用如下方法
import {jsonp} from 'vue-jsonp'

//在vue2中全局引入时，可以在 main.js中 引入 如下：
import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp);
//然后再其他 .vue文件中使用如下：
this.$jsonp(url, param)...

//**值得注意的是需要使用 指定的参数才是最重要的，缺少某个重要参数就会报错**

经过测试之后，发现上面的某些参数可以去掉，不会影响返回值，所以最终代码只需如下即可：

<script>
import {jsonp} from 'vue-jsonp';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    const params = { // 以下三个参数为 调通接口必填的参数，少一个则会报错
      output: 'jsonp', 
      address: "北京市海淀区彩和坊路海淀西大街74号",
      key: 'yourkey' //你自己申请的key
    }
    let url = `https://apis.map.qq.com/ws/geocoder/v1`;
    //若全局引用可使用 this.$jsonp
    //this.$jsonp(url, params).then(res => {
    //  console.log('res',res);
    //}).catch(err => {
    //  console.log('err', err);
    //})
    jsonp(url, params).then(res => {
      console.log('res',res);
    }).catch(err => {
      console.log('err', err);
    })
  }
}
</script>

顺便看看返回结果：

最后附上在vue3中 vue-jsonp的全局使用方法：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import { jsonp } from 'vue-jsonp';

const app = createApp(App);
app.config.globalProperties.$jsonp = jsonp;
app.mount('#app')

// HelloWorld.vue
import { onMounted } from 'vue'
// import {jsonp} from 'vue-jsonp';
import { getCurrentInstance } from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props, context) {
    const instance = getCurrentInstance()
    const jsonp = instance.appContext.config.globalProperties.$jsonp;
    onMounted(() => {
      const params = {
        output: 'jsonp',
        address: "北京市海淀区彩和坊路海淀西大街74号",
        key: 'yourkey'
      }
      let url = `https://apis.map.qq.com/ws/geocoder/v1`;
      jsonp(url, params).then(res => {
        console.log('res',res);
      }).catch(err => {
        console.log('err', err);
      })
    })
  }
}
</script>

2021年8月29 亲测可用 额~~突然发现这个全局引用方法好麻烦啊，感觉不如单独引入 jsonp 插件了，大家有没有什么更好的办法，欢迎互相交流@。@