vue工程中，如何查詢用戶訪問的地理位置 + vue中的jsonp

有一個需求，就是當用戶訪問你們公司的網站時，需要查到這位用戶的地理位置（通過電腦ip來訪問）

試了很多方法，感覺使用騰訊的位置服務api最好，返回的信息最全，包括經緯度，國家城市地區等。而其他絕大多數僅僅反饋了一個城市名。

接下來就說一下怎么使用騰訊的位置服務獲取用戶訪問的地理信息：

　　一、首先在https://lbs.qq.com/console/setting.html這個網頁中 ， 申請你自己key，也就是密鑰，有了這個密鑰，你才有資格使用位置服務api；

　　二、申請后，然后在官網上設置你的key，找到　　key管理--》啟用產品--》WebServiceAPI   選擇授權IP  內容輸入0.0.0.0-255.255.25.255

　　三、然后在頁面上進行使用就行了，但這個接口是跨域的，而騰訊給的方法是jsonp解決跨域，倘若是原生，我們可以直接用jq來進行jsonp跨域，

可是axios根本不能進行jsonp跨域，網上查了半天，才找到vue中原來有一個依賴   vue-jsonp  用於專門解決jsonp跨域

　　接下來就說一下如何使用jsonp來進行騰訊位置信息api的獲取：

 

　　1.安裝下載vue-jsonp依賴

cnpm i -S vue-jsonp

　　2.在main.js中導入vue-jsonp

import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

　　3.請求接口，獲取數據

　　　　created() {
            var data = {
                key: "WDTBZ-EOPRG-5ONQY-IDVMO-NXIIK-C4B7A"  //這個key就是你申請的密鑰
            }; 
            var url = "https://apis.map.qq.com/ws/location/v1/ip"; //這個就是地理位置信息的接口
            data.output = "jsonp";
            this.$jsonp(url, data)
                .then(res => {
                  console.log(res) 
                })
                .catch(error => {
                    console.log(error);
                });
        },


　　　　//res：{status: 0, message: "query ok", result: {…}}
　　　　//result中。就是各種信息。比如經緯度，國家，地區等等

ok，完成！