Tencent location service access tutorial

Tencent location service access

Don't you want to take a look at such a cool interface?
Tencent Location Service

1. Preliminary preparation

1. Account registration
   WeChat scan code to log in
2. Apply for developer key
   console->key and quota->key management
   
3. Key setting
   It is best to extract each independent function to apply for a developer key.
   Here I applied for two (it doesn’t cost money anyway ^ v ^) to
   enter the key setting interface, just
   
   check WebServiceAPI ✔
   
   Then click save

2. Preparation before development

What I want to do is to obtain the user's location based on the user's ip at this time, and then query the local weather data. The principle and implementation are relatively simple.

1. As a qualified developer, the first step in contact with a new thing is of course to look at its development documentation.
   The document link is here WebService API development document
   Locate the IP location service we want to use
   Look at the request and response fields
   Request:
   
   Response:
   
2. To get an unfamiliar interface, of course, first test the following to see if the returned data conforms to the design of the interface document (although it is impossible for a large manufacturer like Tencent to have data inconsistency with the document), this is a good habit. It can effectively prevent the reduction of fishing time caused by data inconsistency and back-end wrangling after the start of development.

• Open posman
  do not know why my postman can not open, then it seems to re-install
  (this is not the time to reduce my goof it?)
  Fortunately, there are many tools you can use online interface test
  here I used getman
• Fill in the request address and parameter key to initiate a request happily
• Click ✔ Click, soon, the data will be returned
  
• Take a look at the response field and the nested relationship
  status and message indicate that the request result and status
  
  
  structure are also the same, and finally you can enter the exciting development link.

Three, development process

Applying a simple template written before,
using the ajax api encapsulated by jq also simplifies the request operation. The
main code is as follows:

const key = 'VOKBZ-XXXXX-XXXXX-XXXXX-XXXXX-EKBXF'
console.log(location)
window.onload = ()=>{
    
    
	$.ajax({
    
    
          url: 'https://apis.map.qq.com/ws/location/v1/ip?key='+key,
          data: {
    
    },
          success: function(res){
    
    
           		$("#location").html(res.result.ad_info.province+'/'+res.result.ad_info.city)
          }
	})
}

Is not it simple?