The Vue3 project calls Tencent map services (address resolution, address conversion to coordinates) and cross-domain issues using axios

1. Demand

Convert the incoming text address into coordinates and display the map point on Tencent Map

Second, use axios to send requests

import axios from 'axios'; //引入axios

           axios({
                url:'https://apis.map.qq.com/ws/geocoder/v1',
                method:'get'
                //参数 地址和key值
            }).then((data)=>{
                   console.log(data)
            });

But after using it, a cross-domain error is reported

(2) Solving cross-domain issues:

After some searching, I found a way. Use the plug-in vue-jsonp to solve cross-domain problems.

1. Install vue-jsonp,

npm install vue-jsonp

2. Directly introduce and use it on the usage page

import { jsonp } from "vue-jsonp";

  jsonp('http://apis.map.qq.com/ws/geocoder/v1', {
            address: sonTaskItemObj.address,
            key: "VUFBZ-SRPCA-REEK7-CQKQP-PDLYV-V4BH5",
            output: "jsonp"
        }).then(data => {
                
        })

In this way, what I pass in is xx Road, xx District, xx City. Please be as detailed as possible and then I will return the coordinate address to you.

4. The default request for Tencent Map is json. When requesting, you need to add output: "jsonp"