vue通过腾讯位置服务实现IP定位

1.首先进入腾讯位置控制台，创建自己的应用。

2.根据腾讯位置文档提示进行。

WebService API | 腾讯位置服务

3.通过jsonp解决跨域问题 

(1).新建一个jsonp.js文件：

export const jsonp = function (url, data) {
    return new Promise((resolve, reject) => {
        // 1.初始化url
        let dataString = url.indexOf('?') === -1 ? '?' : '&'
        let callbackName = `jsonpCB_${Date.now()}`;
        url += `${dataString}callback=${callbackName}`
        if (data) {

            // 2.有请求参数，依次添加到url
            for (let k in data) {
                url += `&${k}=${data[k]}`
            }
        }

        let scriptNode = document.createElement('script');
        scriptNode.src = url;

        // 3. callback
        window[callbackName] = (result) => {
            result ? resolve(result) : reject('没有返回数据');
            delete window[callbackName];
            document.body.removeChild(scriptNode);
        }

        // 4. 异常情况
        scriptNode.addEventListener('error', () => {
            reject('接口返回数据失败');
            delete window[callbackName];
            document.body.removeChild(scriptNode);
        }, false)

        // 5. 开始请求
        document.body.appendChild(scriptNode)
    })
}

(2).相应界面引用

import { jsonp } from "@/utils/jsonp";

    //获取定位
    acquisitionLocation() {
      console.log(1);
      let url = "https://apis.map.qq.com/ws/location/v1/ip";
      jsonp(url, {
        key: "", //新建应用的key值
        output: "jsonp",
      }).then(async (res) => {
        // 返回的结果
        if (res.status === 0) {
            //获取成功
          } else {
            this.$message.warning(response.message);
          }
        }
      });
    },