vue-insagent-app/pages/caragent/addressSearch.vue

<template>
	<view class="page">
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="search">
			<view class="region dis a-c j-s" style="position: absolute; z-index: 9;">
				<text>{{city}}</text>
				<view style="width: 1px;height: 60%;background-color: #999;"></view>
			</view>
			<u-search style="position: relative;" placeholder="请输入位置/地名等" v-model="address" :height='80'
				:animation='true' :input-style="{paddingLeft: '50px'}" @search="search" @custom="search">
			</u-search>
		</view>
		<view class="addressContent dis f-c">
			<view class="dis  f-c" style="margin-bottom: 15px;" v-for="(item,index) in addressList" :key="index"
				@click="addressClick(item)">
				<text style="font-size: 16px;">{{item.name}}</text>
				<view class="dis a-c" style="color: #999;">
					<text>{{item.distance}}</text>
					<view style="width: 1px;height: 16px;background-color: #999;margin: 0 10px;"></view>
					<text>{{item.address}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				city: "",
				address: "",
				mapKey: '197d1a12301a306f82533a23651807b8',
				latitude: 0,
				longitude: 0,
				addressList: [],
			}
		},
		async onLoad(params) {
			if (!!params) {
				let data = JSON.parse(params.info);
				this.latitude = data.latitude;
				this.longitude = data.longitude;
				this.city = data.address.city;
			}

		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			search(val) {
				this.address = val;
				this.addressConversion();
			},
			addressConversion() {
				uni.request({
					url: `https://restapi.amap.com/v3/place/around?key=${this.mapKey}&location=${this.longitude},${this.latitude}&radius=10000&types=&city=${this.city}&keywords=${this.address}`,
					method: "GET",
					success: (res) => {
						this.addressList = res.data.pois;
						this.addressList.map(val => {
							val.distance = this.conversion(val.distance);
							return val;
						})
					}
				});
			},
			conversion(data) {
				if (data < 1000) {
					return data + 'm'
				} else {
					return data / 1000 + 'km'
				}
			},
			addressClick(val) {
				let data = val.location.split(',')
				//选中之后返回上一页并修改数据
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.city = val.cityname; //城市
				prevPage.$vm.keywords = val.name; //关键词
				prevPage.$vm.latitude = data[1]; //经度
				prevPage.$vm.longitude = data[0]; //纬度
				uni.navigateBack({
					delta: 1
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.mymap__map {
		width: 100%;
		height: 400px;
	}

	.search {
		padding: 10px;
		background-color: #fff;
		position: fixed;
		top: 44;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.region {
		width: 70px;
		height: 40px;
		background-color: #f2f2f2;
		padding: 5px 10px;
		border-bottom-left-radius: 50px;
		border-top-left-radius: 50px;

	}

	.addressContent {
		padding: 20px;
		width: 100%;
		height: auto;
		background-color: #fff;
		position: absolute;
		top: 60px;

		view {
			font-size: 12px;
		}
	}
</style>