地址坐标位置距离大小

<!--
首页
20200226
-->
<template>
  <div class="box" style="">
    <!-- 页面头部 返回上一页 开始  box_img_adress-->
    <van-sticky>
      <div class="box">
        <div style="display: flex;align-items: center;justify-content: space-between;padding:  25px 10px 10px 10px;">
          <div>
            <img src="" alt="" style="width: 130px;border-radius: inherit; ">
          </div>
          <div style="display: flex;align-items: center;justify-content: flex-end;flex: 1;" @click="openoneChooseNav">
            <img src="" alt="" style="width: 15px;border-radius: inherit; ">
            <span style="color: #25345A;padding-left: 5px;font-size: 14px;">{{ address
              }}</span>
          </div>
        </div>

        <form action="">
          <div @click="clickseach"><van-search v-model="name" placeholder="请输入" @search="onSearch"
              @clear="onCancel"></van-search></div>
        </form>
      </div>
    </van-sticky>
    <!-- 内容列表 -->
    <div class="content" style="margin: 5px 0 60px 0;">
      <div class="no_data_area" v-if="isshow">
        <img :src="overimg" alt="">
      </div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
       
      </van-list>
    </div>

    <!-- 弹框 -->
    <van-popup v-model="openChooseNav" position="center" round :style="{}" class="share_content"
      :close-on-popstate="true" :close-on-click-overlay="true">
      <div class="box_img_adress" style="padding: 15px;">
        <div style="display: flex;align-items: center;justify-content: space-between;">
          <div style="display: flex;align-items: center;font-size: 12px;">
            <span style="padding-right: 5px;font-size: 16px;font-weight: 700;color: #000000;">获取位置</span>
            <img src="../../../static/imgs/lj2.png" alt="" srcset="" style="width: 15px;border-radius: inherit; ">
          </div>
          <div>
            <img src="../../../static/imgs/logo2.png" alt="" srcset="" style="width: 120px;border-radius: inherit; ">
          </div>
        </div>
        <div style="padding: 15px 0;font-size: 16px;color: #383838;">为了更好为您服务，匹配附近。需要获取您的位置!</div>
        <div style="padding: 15px 0;display: flex;justify-content: space-between;">
          <van-button type="default" round style="width: 45%;color: #383838;font-weight: 700;"
            @click="clearadress">拒绝</van-button>
          <van-button type="info" round style="width: 45%;font-weight: 700;" @click="getadress">允许</van-button>
        </div>
      </div>
    </van-popup>


    <van-popup v-model="showChooseNav" position="bottom" round :style="{}" class="share_content"
      :close-on-popstate="true" :close-on-click-overlay="true">
      <div class="box_img_adress" style="padding: 15px;">
        <div style="display: flex;align-items: center;justify-content: center;">
          <div style="padding: 5px;font-size: 16px;font-weight: 700;color: #000000;">选择导航应用</div>
        </div>
        <div
          style="color: #000000;padding: 15px  0;text-align: center;background: #fff;border-radius: 5px;margin: 5px 0;font-size: 14px;"
          v-for="(it, id) in navActions" @click="selectNav(it, id)">{{ it.name }}</div>
      </div>

    </van-popup>


    <!-- 遮罩层 -->
    <van-overlay :show="ladding">
      <div class="wrapper">
        <div class="block">
          <van-loading size="24px" vertical>获取定位中...</van-loading>
        </div>
      </div>
    </van-overlay>


  </div>
</template>
<script>
export default {
  name: 'Index',
  components: {},
  props: {},
  data() {
    return {
      address: '点击获取定位',
      nocoverUrl: require('../../../static/imgs/u_avatar.png'),
      overimg: require('../../../static/imgs/no_data.png'),
      // 分页
      page: 1,
      codes: "4002,5716,4011,5960,7296,4012,7305,7312",
      name: "",
      // 内容
      list: [],
      loading: false,
      finished: false,
      isshow: false,
      // 打开定位
      openChooseNav: false,
      adressshow: false,
      // 导航
      showChooseNav: false, //展示导航方式
      navActions: [{ name: "高德地图" }, { name: "百度地图" }],
      initData: {
        lng: '',
        lat: '',
        position: '',
      },
      ladding: false,
      // btnladding: false,
      geolocation: null
    }
  },
  computed: {
    // listary(){
    //   if(this.list.length == 0){
    //     return []
    //   }else{
    //     return 
    //   }
    //   console.log(this.list,123)
    // }
  },
  watch: {},
  created() {
    const _this = this;

    // 拒绝
    // if (localStorage.getItem("btnladding")) {
    //   // 定位
    //   if (sessionStorage.getItem("setadress")) {
    //     _this.openChooseNav = false
    //     return
    //   } else {
    //     _this.openChooseNav = true
    //     return
    //   }
    // } else {
    //   if (sessionStorage.getItem("setadress")) {
    //     _this.openChooseNav = false
    //     return
    //   } else {
    _this.openChooseNav = true
    //   return
    // }
    // }
  },
  mounted() {
    const _this = this;
    _this.querlist(true)
    // _this.initMap();
  },
  // beforeDestroy() {
  //   sessionStorage.clear()
  //   localStorage.clear()
  // },
  destroyed() {
    sessionStorage.clear()
    localStorage.clear()
  },
  activated() {
    const _this = this;
  },
  methods: {
    // clickbtnladding() {
    //   localStorage.setItem("btnladding", 1)
    //   location.reload();
    // },
    clickseach() {
      this.$nextTick(() => {
        try {
          const input = document.getElementsByClassName("van-field__control")[0];
          input.focus();
        } catch (e) { }
      });
    },
    openoneChooseNav() {
      const _this = this
      // if (localStorage.getItem("btnladding")) {
      if (sessionStorage.getItem("setadress")) {
        _this.openChooseNav = false
        return
      } else {
        location.reload();
        return
      }
      // } else {
      //   if (sessionStorage.getItem("setadress")) {
      //     _this.openChooseNav = false
      //     return
      //   } else {
      //     location.reload();
      //     return
      //   }
      // }
    },
    // 搜索
    onSearch(val) {
      const _this = this
      // _this.name = _this.$refs.search_name.value
      _this.querlist(true)
    },
    // 删除
    onCancel() {
      const _this = this
      // _this.$refs.search_name.value = ""
      _this.name = ""
      _this.querlist(true)
    },
    // 内容
    onLoad() {
      const _this = this
      // _this.querlist(false)
    },
    // 需求列表
    querlist(reload) {
      const _this = this
      if (reload) {
        _this.page = 1;
        _this.list = []
      }
      let tmpParams = {
        codes: _this.codes,
        loc_lng: _this.initData.lng,
        loc_lat: _this.initData.lat,
        name: _this.name,
        page: _this.page
      }
      _this.axios.post(_this.GLOBAL.opo_store_api + '/api/store/getRecentlyStoreList',
        _this.qs.stringify(tmpParams)).then(function (res) {
          if (res.status == 200) {
            if (typeof res.data != "object") {
              res.data = JSON.parse(res.data);
            }
            if (tmpParams.page <= 1) {
              _this.list = []; //如果载入的是第一页，要把列表数组清空
            }
            if (res.data.status == 1) {
              let listary = res.data.data

              if (tmpParams.page == 1) {
                if (listary.length == 0) {
                  _this.isshow = true
                  _this.loading = false;
                  _this.finished = true;
                  return
                } else {
                  _this.isshow = false
                }
              }
              if (_this.initData.lng != "" || _this.initData.lat != "") {
                for (var i = 0; i < listary.length; i++) {
                  listary[i].address = listary[i].province + listary[i].city + listary[i].district + listary[i].address
                  listary[i].adress = _this.ubtil(_this.initData.lat, _this.initData.lng, listary[i].locLat, listary[i].locLng)
                  _this.list.push(listary[i])
                }
              } else {
                for (var i = 0; i < listary.length; i++) {
                  listary[i].address = listary[i].province + listary[i].city + listary[i].district + listary[i].address
                  _this.list.push(listary[i])
                }
              }
              _this.loading = false;
              // 数据全部加载完成
              // if (listary.length < tmpParams.page_size) {
              if (listary.length < 10) {
                _this.finished = true;
              } else {
                _this.page++;
                _this.finished = false;
              }

            } else {
              _this.isshow = true
              _this.loading = false;
              _this.finished = true;
              _this.$toast(res.data.msg ? res.data.msg : '网络加载失败，请稍后再试');
            }
          } else {
            _this.isshow = true
            _this.loading = false;
            _this.finished = true;
            _this.$toast(res.data.msg ? res.data.msg : '网络加载失败，请稍后再试');
          }
        }).catch(function (error) {
          _this.$toast('网络加载失败，请稍后再试');
        });

    },
    ubtil(latA, lonA, latB, lonB) {
      // console.log(latA, lonA, latB, lonB,123123)
      var PI = 3.14159265358979324;
      var earthR = 6371000.;
      var x = Math.cos(latA * PI / 180.) * Math.cos(latB * PI / 180.) * Math.cos((lonA - lonB) * PI / 180);
      var y = Math.sin(latA * PI / 180.) * Math.sin(latB * PI / 180.);
      var s = x + y;
      if (s > 1) s = 1;
      if (s < -1) s = -1;
      var alpha = Math.acos(s);
      var distance = alpha * earthR;
      if (distance < 100) {
        return "位置" + parseInt(distance) + "米";
      } else if (distance > 300000) {
        return "位置" + (distance / 1000).toFixed(1) + "公里";
      }
      // return distance;
    },
    // 拒绝
    clearadress() {
      const _this = this
      _this.openChooseNav = false
      sessionStorage.clear()
      // localStorage.clear()
    },

    // 定位
    getadress() {
      const _this = this
      _this.openChooseNav = false
      _this.ladding = true
      _this.geolocation = null;

      AMap.plugin('AMap.Geolocation', function () {
        _this.geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 3000, // 超过10秒后停止定位，默认：无穷大
        });
        _this.geolocation.getCurrentPosition(function (status, result) {
          if (status === 'complete') {
            _this.adressshow = true
            _this.ladding = false
            sessionStorage.setItem("setadress", 1)
            // sessionStorage.setItem("btnladding", 1)
            // 定位成功
            var location = result.position;
            _this.initData.lng = location.lng
            _this.initData.lat = location.lat
            _this.getAddressByLngLat(_this.initData.lng, _this.initData.lat); // 根据经纬度获取地址
            _this.querlist(true)
            console.log(status, result, 'status, result');
          } else {
            _this.ladding = false
            // if (sessionStorage.getItem("btnladding") == null) {
            // _this.btnladding = true
            // }
            _this.$toast('获取定位失败，请检查您的定位服务或微信应用是否授权位置信息！');
          }
        });
      });
    },
    getAddressByLngLat(lng, lat) {
      const _this = this
      _this.axios.get(`https://restapi.amap.com/v3/geocode/regeo?location=${lng},${lat}&key=c9c71fdec9b353c4a9658e5cebd00a2c&radius=1000&extensions=all `).then(function (res) {
        _this.ladding = false
        _this.address = res.data.regeocode.formatted_address
        console.log(res, 'res.data');
      }).catch(function (error) {
        _this.ladding = false
        // _this.$toast('获取定位失败，请检查您的定位服务或微信应用是否授权位置信息！');
      });
    },
    // 导航 =============================
    // 打开导航选择
    openCancelNav(it) {
      const _this = this
      _this.initData.lng = it.locLng
      _this.initData.lat = it.locLat
      _this.initData.position = it.address
      _this.showChooseNav = true
    },
    // 关闭
    onCancelNav() {
      let _this = this;
      _this.showChooseNav = false;
    },
    selectNav(action, index) {
      console.log(action, index);
      let _this = this;
      _this.showChooseNav = false
      //判断是否点击高德地图
      if (index === 0) {
        let hidden =
          window.document.hidden ||
          window.document.mozHidden ||
          window.document.msHidden ||
          window.document.webkitHidden;
        if (typeof hidden == "undefined" || hidden == false) {
          _this.$toast("正在打开高德地图网页版...");
          //网页版导航
          window.location.href =
            "https://uri.amap.com/marker?position=" +
            _this.initData.lng +
            "," +
            _this.initData.lat +
            "&name=" +
            _this.initData.position +
            "";
        }
        //百度地图
      } else if (index === 1) {
        _this.$toast("正在打开百度地图网页版...");
        let tmpPoint = _this.qqMapTransBdMap([{ lng: _this.initData.lng, lat: _this.initData.lat }])[0]
        var t0 = new Date().getTime();
        var delay = setInterval(function () {
          var t1 = new Date().getTime();
          if (t1 - t0 < 3000 && t1 - t0 > 2000) {
            window.location.href =
              "https://api.map.baidu.com/marker?location=" +
              tmpPoint.lat +
              "," +
              tmpPoint.lng +
              "&title=" +
              _this.initData.position +
              "&content=" +
              _this.initData.position +
              "&output=html&src=webapp.baidu.openAPIdemo";
          }
          if (t1 - t0 >= 3000) {
            clearInterval(delay);
          }
        }, 500);
      }
    },
    // 定位
    qqMapTransBdMap(list) {
      let result = [];
      for (const res of list) {
        let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
        let x = res.lng;
        let y = res.lat;
        let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
        let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
        let lngs = z * Math.cos(theta) + 0.0065;
        let lats = z * Math.sin(theta) + 0.006;
        result.push({
          lng: lngs,
          lat: lats,
        });
      }
      return result;
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-button--default {
  background-color: #E8E8E8;
  border: 1px solid #ebedf0;
}

// /deep/ .van-nav-bar {
//   // background: initial;
//   background: linear-gradient(180deg, rgba(242, 247, 255, 1));
// }

/deep/ .van-search {
  background: initial;
  border-radius: 40px;
  overflow: hidden;
  // position: relative;
  // z-index: 2000;
}

/deep/ .van-field__control {
  height: 30px;
}

/deep/ .van-search__content {
  background: #fff;
  border-radius: 40px;
}

/deep/ .van-field__left-icon {
  display: flex;
  align-items: center;
}

/deep/.van-search .van-cell {
  // background: #fff;
  // padding: 12px 0px;
}

/deep/ .van-cell {
  // background: initial;
  // width: 95%;
  // margin: 0 auto;
  // border-radius: 30px;
  // padding: 0px;
  padding: 5px 16px 5px 0;
}

/deep/.van-popup--center {
  width: 80%;
}

.box {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  background-image: url('../../../static/imgs/bgmb2.png');
  background-size: cover;
  background-repeat: no-repeat;
}

// /deep/ .van-badge__wrapper {
//   line-height: 1px;
// }

// /deep/ .van-badge--fixed {
//   top: -10px;
// }

/deep/ .van-badge {
  min-width: 25px;
}

/deep/ .van-tab {
  font-size: 14px;
  color: #a5b4da;
}


/deep/ .van-tab--active {
  color: #25345a;
  font-weight: bold;
}

/deep/ .van-tabs__line {
  background-image: linear-gradient(90deg, #4db9ff, #4e66ff) !important;
}

/deep/ .van-grid-item__content--center {
  justify-content: none;
  align-items: normal;

}

/deep/ .van-list {
  padding: 0px 10px 80px 10px;
  // 

}

.content {
  // background: linear-gradient(180deg, rgba(242, 247, 255, 1) 0%, rgba(242, 246, 255, 1) 20.29%, rgba(251, 253, 255, 1) 100%);

 
}


.header_box_box {
  height: 40px;
  margin: 20px 15px 0 15px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.top_1 {
  border: 2px solid rgba(51, 112, 238, 1);
}

.adress {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  font-size: 12px;
  padding: 2px 4px;
  color: #fff;
  border-radius: 5px 0px 10px 0px;
  background: linear-gradient(90deg, rgba(51, 112, 238, 1) 0%, rgba(77, 185, 255, 1) 100%);
}

.box_img_adress {
  background-image: url('../../../static/imgs/bgmb.png');
  background-size: cover;
  background-repeat: no-repeat;
}


.no_data_area {
  color: #a5b4da;
  font-size: 14px;
  width: 100%;
  text-align: center;
  margin-top: 20%;
}

.no_data_area img {
  width: 224px;
  height: 224px;
  margin: 0 auto;
}

.form_search {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .input_search {
    width: 95%;
    margin: 0 auto;
    height: 40px;
    padding: 5px 10px;
    border-radius: 30px;
    border: 1px solid #fff;
    // border-color: initial;
  }

  .form_cross_icon {
    position: absolute;
    right: 11%;
    font-size: 20px;
    color: #A6A6A6;
  }

  .form_search_icon {
    position: absolute;
    right: 5%;
    font-size: 20px;
    color: #A6A6A6;
  }
}


.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: initial;
}
</style>