当前位置：首页 > article >正文

vue-jsonp的使用和腾讯地图当前经纬度和位置详情的获取

article 2025/2/1 17:03:16

1.下载：

npm install –save vue-jsonp

2.main.js中引入：

//腾讯逆地址解析会用到jsonp
import {VueJsonp} from 'vue-jsonp';
Vue.use(VueJsonp);

3.腾讯地图中使用

uniapp中获取*经纬度*和通过经纬度获取当前**位置详情**
//获取当前经纬度
getLocation(){
     uni.getLocation({
       type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02' //微信不能用gcj02，定位出不来
       success: (res) => {
           if(res.longitude){
               uni.setStorageSync('lng', JSON.stringify(res.longitude));
               uni.setStorageSync('lat', JSON.stringify(res.latitude));
               console.log(res,'当前经纬度success');
           }
           this.getAddress(res.latitude,res.longitude)
       },
       fail: res => {
     	 console.log('当前经纬度fail' , res);
       },
       complete: res => {},
     });
 },
 //过经纬度获取地址
getAddress(latitude, longitude) {
    this.$jsonp("https://apis.map.qq.com/ws/geocoder/v1/", {
        key: "你的腾讯地图KEY",
        callbackName: "getJsonData",
        output: 'jsonp',
        location: latitude+","+longitude
        //location: 38.04174+","+114.521911 //测试返回的res结果
    })
    .then(res => {//这里取值：先取最详细的地址，地址一般为：XX街XX号。比如定位没有到XX号，取的是整个地址，仅参考
        if(res.result.address_reference.landmark_l2){
            this.addressDetail = res.result.address_reference.landmark_l2.title
        }else{
            this.addressDetail = res.result.address
        }
    }).catch(err => {
        console.log(err,'逆地址解析fail!')
    })
},