vue project, how to query the user to access location + vue in jsonp

There is a demand, that is, when a user accesses your company's Web site, you need to be found in the user's geographic location (accessible through computer ip)

Tried so many ways, I feel Tencent use of location services api best, most complete information returned, including latitude and longitude, country and other urban areas. The vast majority of feedback while the other is just a city name.

Then say about how to use Tencent's location service to obtain geographic information accessed by the user:

　　First, the first in https://lbs.qq.com/console/setting.html this page, apply your own key, that is the key. With this key, you are eligible to use location services api;

　　Second, the application, and then set your key in the official website to find the　　key management - "Enable Product -" WebServiceAPI select authorized IP content input 0.0.0.0-255.255.25.255

　　Third, on the page and then use the line, but the interface is a cross-domain, and Tencent to solve cross-domain approach is jsonp, if native, we can use jq be jsonp direct cross-domain,

But axios can not be jsonp cross-domain, check online for a long time, only to find that there are a dependent in vue vue-jsonp for cross-domain specifically address jsonp

　　Next jsonp say about how to use the location information to Tencent api access to:

 

　　1. Download the installation dependent vue-jsonp

CNPM i -S-view jsonp

　　2. Import vue-jsonp in the main.js

Import VueJsonp from 'sight-jsonp' 
Vue.use (VueJsonp)

　　3. The request interface, data acquisition

　　　　Created () {
             var Data = { 
                key: "WDTBZ-EOPRG-5ONQY-IDVMO-NXIIK-C4B7A" key // This is you requested key 
            }; 
            var URL = "https://apis.map.qq.com / WS / lOCATION / V1 / IP " ; // this is the interface of the geographic information 
            data.output =" JSONP " ;
             the this . $ JSONP (URL, Data) 
                .then (RES => { 
                  the console.log (RES) 
                } ) 
                . the catch (error => { 
                    the console.log (error); 
                }); 
        },


　　　　RES //: {Status: 0, Message: "Query OK", Result: {...}} 
　　　　// Result in. It is a variety of information. Such as latitude and longitude, national, regional, etc.

ok, complete!