仿微信发朋友圈获取定位

仿微信发朋友圈时获取定位 ，选择位置后地点会显示在外面

 

一 , index.html中引入高德jsdk , key是你自己在高德开放平台申请的 , 要申请web端的key

高德开放平台网站 ：  https://lbs.amap.com/

怎么申请 ? 看这里 == > 

申请高德地图开发者key_唐僧骑白马的博客-CSDN博客_高德开发者key
 

  <!-- 引入高德地图jsdk ,web端的key-->
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=4e3c7848a50dda0dbe3b30234b040377"></script>

二 , 新建一个vue页面 ,把下面代码全部贴过去 , 打开就是我上面截图的效果 , 每行代码都注释的很清楚 （用的vant组件）

<template>
  <div class="locationPage">
    <van-nav-bar title="所在位置" left-arrow @click-left="onClickLeft" />
    <!-- 搜索框 -->
    <van-search
      input-align="center"
      v-model="value"
      show-action
      :clearable="false"
      placeholder="请输入查找内容"
      @search="onSearch"
      @cancel="onCancel"
      @clear="onCancel"
    >
    </van-search>

    <!-- 附近列表 -->
    <van-radio-group v-model="radio" v-if="!this.isSearchListShow">
      <van-cell-group>
        <van-cell title="不显示位置" @click="hideAddress">
          <template #right-icon>
            <van-radio name="1" />
          </template>
        </van-cell>
        <van-cell :title="city" />
        <van-cell
          :title="item.name"
          :label="item.address"
          clickable
          @click="checkLocationAddress(index, $event)"
          v-for="(item, index) in list"
          :key="index"
        >
          <template #right-icon>
            <van-radio :name="index" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>

    <!-- 搜索列表 -->
    <van-radio-group v-model="checkValue" v-if="isSearchListShow">
      <van-cell-group>
        <van-cell
          :title="item.name"
          :label="item.address"
          clickable
          @click="checkSearchAddress(index, $event)"
          v-for="(item, index) in searchList"
          :key="index"
        >
          <template #right-icon>
            <van-radio :name="index" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
  </div>
</template>

<script>
export default {
  name: "locationPage",
  created() {
    this.getLocation();
  },
  data() {
    return {
      // 纬度
      latitude: "",
      // 经度
      longitude: "",
      // 附近列表
      list: "",
      // 城市名
      city: "",
      // 搜索关键字
      value: "",
      // 定位选择
      radio: "1",
      // 搜索列表是否显示
      isSearchListShow: false,
      // 搜索选择
      checkValue: "",
      // 搜索列表
      searchList: [],
      // 勾选定位地址
      checkAddress: "",
      // 勾选搜索地址
      checkSearch: "",

    };
  },
  watch: {
    value(val) {
      this.onSearch(val);
    },
  },
  methods: {
    // 箭头返回
    onClickLeft() {
      this.$router.back()
    },

    // 输入框搜索
    onSearch(val) {
      var that = this;
      let placeSearch;
      AMap.service("AMap.PlaceSearch", function () {
        placeSearch = new AMap.PlaceSearch({
          pageSize: 10,
          pageIndex: 1,
          city: that.city,
        });
        placeSearch.searchNearBy(
          `${val}`,
          `${that.longitude},${that.latitude}`,
          1000,
          (status, result) => {
            console.log(status, result);
            if (status == "no_data") {
              that.isSearchListShow = false;
              return;
            }
            that.searchList = result.poiList.pois;
            console.log(that.searchList);
            // 显示搜索结果
            that.isSearchListShow = true;
          }
        );
      });
      this.isSearchListShow = !this.isSearchListShow;
    },

    // 取消搜索
    onCancel() {
      this.isSearchListShow = false;
    },

    // 勾选定位地址
    checkLocationAddress(index, value) {
      this.radio = index;
      this.checkAddress = value.srcElement.offsetParent.innerText;
      const params = {
        address: this.checkAddress,
        longitude: this.longitude,
        latitude: this.latitude,
      };
      console.log(params);
      this.$store.commit("chooseLocation", params);
      console.log(this.$store.state.longitude, this.$store.state.latitude);
      this.$router.push({
        name: "visit_register",
        params: {
          type: 1,
        },
      });
    },
    // 勾选搜索地址
    checkSearchAddress(index, value) {
      this.checkValue = index;
      this.checkSearch = value.srcElement.offsetParent.innerText;
      console.log(this.checkSearch);
      const params = {
        address: this.checkSearch,
        longitude: this.longitude,
        latitude: this.latitude,
      };
      this.$store.commit("chooseLocation", params);
      console.log(this.$store.state.longitude, this.$store.state.latitude);
      this.$router.push({
        name: "visit_register",
        params: {
          type: 1,
        },
      });
    },

    // 高德api获取定位(可直接获取到具体位置)
    getLocation() {
      var that = this;
      let geolocation;
      AMap.plugin("AMap.Geolocation", function () {
        geolocation = new AMap.Geolocation();
        geolocation.getCurrentPosition((status, result) => {
          if (status == "complete") {
            that.onComplete(result);
          } else {
            that.onError(result);
          }
        });
      });
    },
    //定位成功
    onComplete(data) {
      // alert("定位成功");
      console.log(data);
      // 当前地址
      this.dz = data.formattedAddress;
      // 经纬度
      this.latitude = data.position.lat;
      this.longitude = data.position.lng;
      console.log(this.latitude, this.longitude);
      // alert(`纬度是 ${this.latitude}`);
      // alert(`经度是 ${this.longitude}`);
      // alert(this.dz);

      // 调用查询周边的方法, 传经纬度 , 城市名
      this.aMapSearchNearBy(
        `${this.longitude},${this.latitude}`,
        data.addressComponent.city
      );
    },
    //定位失败
    onError(data) {
      console.log("定位失败:" + data.message);
      // alert("定位失败:" + data.message);
    },

    // 查询附近地点的方法
    aMapSearchNearBy(centerPoint, city) {
      var that = this;
      let placeSearch;
      AMap.service(["AMap.PlaceSearch"], function () {
        placeSearch = new AMap.PlaceSearch({
          pageSize: 20,
          pageIndex: 1,
          city: city,
        });

        placeSearch.searchNearBy(
          "",
          centerPoint,
          1000,
          function (status, result) {
            console.log(result);

            if (result.info === "OK") {
              // alert("获取附近位置成功");
              var locationList = result.poiList.pois;
              that.list = locationList;
            } else {
              // alert("获取附近位置失败");
            }
          }
        );
      });
    },

    // 不显示位置
    hideAddress() {
      this.$store.state.address = "";
      this.$store.state.longitude = "";
      this.$store.state.latitude = "";
    },
  },
};
</script>

<style lang="scss" scoped>
body {
  background-color: #fff !important;
}
.ios {
  padding-top: 44px !important;
}

.van-nav-bar {
  background-color: rgb(43, 118, 245);
}

/deep/ .van-icon-arrow-left::before {
  color: white;
}

/deep/ .van-nav-bar__title {
  color: white;
}

/deep/ .van-search {
  background-color: #eee;
}

/deep/ .van-field__control {
  margin-top: 0.1rem;
}

/deep/ .van-field__left-icon {
  position: absolute;
  left: 1.93rem;
}

/deep/ .van-search__action {
  line-height: unset;
}

/deep/ .van-icon-clear {
  display: none;
}
</style>