移动端H5 腾讯地图sdk 当前位置 地址你解析 距离计算

<template>
  <view class="content">
    <view>
      <input class="uni-input" placeholder="输入纬度" v-model="lat" />
      <input class="uni-input" placeholder="输入经度" v-model="lon" />
      <button @click="reverseGeocoder" style="width: 750rpx;">转化</button>
      <view>位置：{{remark}}</view>
    </view>
    <button @click="onclick()">点击获取经纬度信息</button>
    <br />
    <text>当前位置经度信息：{{longitude}}</text>
    <text>当前位置维度信息：{{latitude}}</text>
  </view>
</template>

<script>
  import QQMapWX from '@/common/qqmap-wx-jssdk.js'

  export default {
    data() {
      return {
        // 116.56086,39.774944
        lat: '39.774944',
        lon: '116.56086',
        qqMap: new QQMapWX({
          key: 'JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU',
          vm: this
        }),
        remark: undefined,
        longitude: '',
        latitude: ''
      }
    },
    onReady() {
      this.formSubmit();
    },
    methods: {
      formSubmit() {
        var _this = this;
        //调用距离计算接口
        this.qqMap.calculateDistance({
          //mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填
          //from参数不填默认当前地址
          //获取表单提交的经纬度并设置from和to参数（示例为string格式）
          // from: e.detail.value.start || '', //若起点有数据则采用起点坐标，若为空默认当前地址
          // to: e.detail.value.dest, //终点坐标
          // mode: "walking",
          from: "39.775272,116.554588", //当前位置的经纬度
          to: "39.780864,116.567515", //办公地点经纬度
          success: (res) => { //成功后的回调
            // debugger
            console.log(res);
            let hw = res.result.elements[0].distance; //拿到距离(米)
            console.log("hw", hw);
            if (hw && hw !== -1) {
              if (hw < 1000) {
                hw = hw + "m";
              }
              //转换成公里
              else {
                hw = (hw / 2 / 500).toFixed(2) + "km";
              }
            } else {
              hw = "距离太近或请刷新重试";
            }
            console.log("当前位置与办公地点距离:" + hw);
          },
        });
      },
      // 接口调用说明
      onclick() {
        let _this = this
        console.log("开始执行。。。");
        uni.getLocation({
          type: "gcj02",
          // type: "wgs84",
          geocode: true,
          success: (res) => {
            console.log("获取经纬度成功");
            _this.longitude = res.longitude;
            _this.latitude = res.latitude;
            console.log("当前位置的经度:", res.longitude);
            console.log("当前位置的纬度:", res.latitude);

          },
          // 此处新增测试
          fail: () => {
            console.log("获取经纬度失败");
          },
          complete: () => {
            // 解析地址
            this.qqMap.reverseGeocoder({
              location: {
                latitude: _this.latitude,
                longitude: _this.longitude,
              },
              success: function(res) {
                console.log("解析地址成功");
                console.log(res);
                // 省
                let province = res.result.ad_info.province;
                // 市
                let city = res.result.ad_info.city;
                // console.log(province);
                // console.log(city);
              },
              fail: function(res) {
                uni.showToast({
                  title: "定位失败",
                  duration: 2000,
                  icon: "none",
                });
                console.log(res);
              },
              complete: function(res) {
                console.log(res);
              },
            });
          },
          // 新增end
        });
      },
      // 示例 经纬度转换位置描述
      reverseGeocoder() {
        let _this = this
        this.qqMap.reverseGeocoder({
          location: {
            latitude: _this.lat,
            longitude: _this.lon
          },
          success: (res) => {
            console.log(res)
            this.remark = res.result.address
          },
          fail: (res) => {
            console.error(res)
          }
        })
      },

    },

  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>