uni 获取当前位置 + jsonp跨域(记得在uni-web配置腾讯地图key)

腾讯位置

• 1.申请腾讯位置 key    腾讯位置服务 - 立足生态，连接未来

• 2.下载腾讯地图 api.js 文件 阿里云盘分享

• 3.将文件放入项目，位置自定义

• 4.需要页面引入 import QQMapWX from '../../components/common/qqmap-wx-jssdk'

// 5.在onLoad里注册
      this.qqmapsdk = new QQMapWX({
        // 腾讯位置平台申请的秘钥
        key: 'ZwTVu16RLXjhW7FHDjYt5HfMnR1dhFpR'
      })

//6.获取经纬度
    getJW () { // 获取经纬度
      let _this = this
      uni.getLocation({
        type: 'wgs84',
        geocode: true,
        success: function (res) {
          console.log(res);
          console.log('当前位置的经度：' + res.longitude);
          console.log('当前位置的纬度：' + res.latitude);
          _this.getLocal(res.longitude, res.latitude)
        },
      });
    },

// 7.根据经纬度获取地理位置
      getLocal (longitude, latitude) { // 根据经纬度获取地理位置
      let locationdata = latitude + ',' + longitude // 经纬度

// jsonp 解决跨域
      this.$jsonp('https://api.map.baidu.com/geocoder/v2/?callback=renderReverse&output=json&pois=1', {
        ak: 'ZwTVu16RLXjhW7FHDjYt5HfMnR1dhFpR', // 腾讯地图key
        location: locationdata
      }).then((res) => {
        console.log(res)
      })
    },

跨域问题 Jsonp 解决方案

• 1.下包 npm install vue-jsonp --save

• 2.在 min.js 引入

  • import { VueJsonp } from 'vue-jsonp'

  • Vue.use(VueJsonp)

• 3.使用

  • this.$jsonp()