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

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

高德开放平台网站 ：/

怎么申请 ? 看这里 == >

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

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

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

<template><div class="locationPage"><van-nav-bar title="所在位置" left-arrow @click-left="onClickLeft" /><!-- 搜索框 --><van-searchinput-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.$mit("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.$mit("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>