Ip定位为例子非精确定位场景https://lbs.qq.com/service/webService/webServiceGuide/position/webServiceIp步骤一在腾讯申请key步骤二在代码调用方式一手动封装 JSONP 函数创建 utils/jsonp.js 文件// static/js/jsonp.jsexportfunctionjsonp(url,params{}){returnnewPromise((resolve,reject){// 生成唯一回调函数名constcallbackNamejsonp_${Date.now()}_${Math.random().toString(36).substr(2)}// 将回调函数挂载到 window 上window[callbackName]function(data){resolve(data)// 清理移除 script 标签和全局函数document.body.removeChild(script)deletewindow[callbackName]}// 处理参数不使用扩展运算符手动合并对象constqueryParams{output:jsonp,callback:callbackName}// 手动将 params 的属性复制到 queryParamsfor(letkeyinparams){if(params.hasOwnProperty(key)){queryParams[key]params[key]}}// 构建查询字符串constqueryStringObject.keys(queryParams).map(key${encodeURIComponent(key)}${encodeURIComponent(queryParams[key])}).join()// 创建 script 标签constscriptdocument.createElement(script)script.src${url}?${queryString}// 设置超时可选consttimeoutsetTimeout((){reject(newError(JSONP 请求超时))document.body.removeChild(script)deletewindow[callbackName]},10000)script.onloadfunction(){clearTimeout(timeout)}script.onerrorfunction(){clearTimeout(timeout)reject(newError(JSONP 请求失败))document.body.removeChild(script)deletewindow[callbackName]}// 添加到页面开始请求document.body.appendChild(script)})}在组件中使用templatedivbuttonclickgetLocation获取位置信息/buttonpv-iflocationInfo当前位置{{ locationInfo }}/p/div/templatescriptimport{jsonp}from/utils/jsonp.jsexportdefault{data(){return{locationInfo:null}},methods:{getLocation(){consturlhttps://apis.map.qq.com/ws/location/v1/ipconstparams{key:WPIBZ-LYSC7-3QNXH-P6KEA-NF3ZF-MRBTY// 你的key}jsonp(url,params).then(res{console.log(请求成功,res)this.locationInfores.result}).catch(err{console.error(请求失败,err)})}}}/script方式二在 index.html 中直接引用最简单的临时方案如果你只需要在页面加载时获取一次位置信息可以直接在 public/index.html 中添加 script 标签!-- public/index.html --!DOCTYPEhtmlhtmlheadmetacharsetutf-8title你的项目/titlescriptwindow.getLocationCallbackfunction(data){// 将数据存储在 sessionStorage 中供 Vue 组件使用sessionStorage.setItem(ipLocation,JSON.stringify(data.result))}/script!-- 直接引入腾讯地图 API --scriptsrchttps://apis.map.qq.com/ws/location/v1/ip?keyWPIBZ-LYSC7-3QNXH-P6KEA-NF3ZF-MRBTYoutputjsonpcallbackgetLocationCallback/script/headbodydividapp/div/body/html然后在 Vue 组件中读取// 在组件中mounted(){const datasessionStorage.getItem(ipLocation)if(data){this.locationInfoJSON.parse(data)}}错误案例axios .get( https://apis.map.qq.com/ws/location/v1/ip?keyWPIBZ-LYSC7-3QNXH-P6KEA-NF3ZF-MRBTYoutputjsonp, { headers: { }, } ) .then((res) { console.log(res,111) })请求腾讯地图api跨域了上面两个方式都无跨域问题