uniapp h5使用map跨域问题

npm init -y //初始化一下项目

npm i vue-jsonp //下载jsonp 不初始化无法下载

//main.js中引入
import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp)

//h5 将经纬度转换成地址
getUserLocation() {
  let locationObj = this.latitude + "," + this.longitude;//先拿到当前的需要转换位置的经纬度
  let url ="https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&poi_options=page_size=20;page_index=1";
  this.$jsonp(url, {
    key: //腾讯地图key,自行申请,
    location: locationObj,
    output:'jsonp'
  })
    .then((res) => {
    console.log(res, "rees");
  })
    .catch((err) => {
    console.log(err);
  });
},
  
//H5 将输入的地址转换成经纬度
getUserLocation() {
  let url = "https://apis.map.qq.com/ws/place/v1/suggestion";
  this.$jsonp(url, {
    keyword: "郑州",//需要查询的地址名称,以'郑州'关键词为例
    region: "全国",
    region_fix:  0,
    policy:  0,
    page_size: 20,//多少条
    page_index:  1,//第几页
    get_subpois: 0,
    output: "jsonp",
    key://自行去腾讯地图申请key,
  })
    .then((res) => {
    console.log(res);
  })
    .catch((err) => {
      console.log(err);
    });
},
//不出意外的话你不会再跨域了 ~^o^~

  

 

posted @ 2022-03-14 15:29  小万子呀  阅读(461)  评论(0编辑  收藏  举报