目录

一、准备工作：

1、申请高德key （下方链接直接点进去查看方法）

2、下载并安装微信小程序插件

3、在微信公众平台设置安全通讯域名

二、使用高德进行地址搜索：

三、获取当前定位地址：

四、保存搜索记录：

五、查看当前位置以及搜索地址之间距离

 在getLocation中获取当前位置经纬度

 在searchTips中获取搜索位置的经纬度 

总结代码

---

一、准备工作：

（ 详细步骤：高德微信小程序入门指南 ）

1、申请高德key （下方链接直接点进去查看方法）

获取高德key方式

2、下载并安装微信小程序插件

微信小程序插件 相关下载 

3、在微信公众平台设置安全通讯域名

微信公众平台

在 "开发"－>"开发管理"－>"开发设置" 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去，如下图所示：

 

二、使用高德进行地址搜索：

HTML 结构 及定义相关的数据

<view class="select-input">
	<input v-model="keyword" @input="input" placeholder-class="input_holder" placeholder="请输入地点" />
	<uni-icons type="search" size="22" style="margin-right: 15rpx;" color="#D8D8D8"></uni-icons>
</view>
<view class="area-site">
			<ul>
				<li @click="checkdizhi(item)" v-for="(item,index) in searchResults" :key="item.id" class="position_ul">
					<view>
						<image src="@/static/images/task/icon-positioning.png"
							style="width: 16px;height: 16px;margin-right: 7.5px;"></image>
					</view>
					<view class="address">
						<text class="address-name">{
   {item.name}}</text>
						<text class="current-address">{
   {item.district}}{
   {item.address}}</text>
					</view>
				</li>
			</ul>
</view>

    import amapFile from '@/static/libs/amap-wx.130.js'; // 引入下载的组件js文件	
	export default {
		data() {
			return {
				timer: null, // 设置防抖
				myAmapFun: null, // 高德获取地址
				keyword: '', // 用户输入的关键词
				searchResults: [], // 搜索提示结果
				gaodekey: 'key', // 高德的key
				city: '北京',
				currentname: "", // 地址标题
				currentaddress: "", // 已经获取到当前的位置
			}
		},
    }

method 方法（searchTips）

			// menthods 方法
            // 搜索地址
			searchTips() {
				if (this.keyword === '') {
					this.searchResults = [] // 储存搜索结果数组
					return
				}
				const _this = this;
				// 发起搜索提示请求
				this.myAmapFun.getInputtips({
					keywords: this.keyword, // 搜索输入的关键字
					city: this.city, //必须填写搜索的城市
					success(data) {
						if (data && data.tips) {
							const arr = JSON.parse(JSON.stringify(data.tips))
							_this.searchResults = arr; // 储存搜索结果数组
						}
					},
				});
			},
			// 搜索函数防抖
			input(e) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.searchTips()
				}, 500)
			},
            // 选择地址  点击搜索出来的地址
			checkdizhi(item) {
				// this.saveSearchHistory(item) // 保存历史记录 
			},

 CSS样式：（我的样式采用了scss 如果没用到就把嵌套的样式拿出来）

	// 搜索栏
	.area-header {
		background-color: #fff;
		padding: 22px 16px;

		.header-select {
			background-color: #F3F3F3;
			padding: 20rpx 5rpx;
			display: flex;
			align-items: center;

			// 左侧的城市名
			.select-region {
				padding-left: 5px;
				display: flex;
				align-items: center;
				width: 30%;
				justify-content: space-between;

				.region_text {
					font-size: 16px;
				}
			}

			// 右侧输入地址
			.select-input {
				display: flex;

				.input_holder {
					color: #D8D8D8;
					font-size: 16px;
				}
			}
		}
	}

	// 地址栏
	.position_ul {
		background-color: #fff;
		padding: 10px 20px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F3F3F3;

		.address {
			width: 75%;

			.address-name {
				font-size: 16px;
			}

			.current-address {
				margin-top: 2px;
				font-size: 12px;
				color: #C0C4CC;
				display: flex;
				flex-direction: column;
			}
		}

		.distance_text {
			width: 5%;
			margin-left: 10px;
			font-size: 12px;
			color: #C0C4CC;
		}

		// 位置距离
		.site-distance {}
	}

三、获取当前定位地址：

首先配置  manifest.json 文件 获取微信小程序权限配置

打开manifest.json源码视图，确保小程序有相关配置

    /* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "id", // 自己的微信小程序id
        "setting" : {
            "urlCheck" : false,
            "es6" : true,
            "postcss" : true
        },
        "usingComponents" : true,
        "permission" : {
            "scope.userLocation" : {
                "desc" : "获取当前位置信息"
            }
        },
		"requiredPrivateInfos":["getLocation"] // 这个必须有，否则获取不到当前地址
    },

 method方法：（getLocation） 

// 获取当前位置
getLocation() {
	const _this = this;
	_this.myAmapFun = new amapFile.AMapWX({
		key: this.gaodekey
	});
	uni.showLoading({
		title: '获取信息中'
	});
	// 成功获取位置
	_this.myAmapFun.getRegeo({
		success: (data) => {
			console.log(data, '当前定位');
			_this.currentname = `${data[0].desc}`
			_this.currentaddress = `${data[0].regeocodeData.formatted_address}`;
			uni.hideLoading();
		},
		// 获取位置失败
		fail: (err) => {
			console.log(err, 'err')
			uni.showToast({
				title: "获取位置失败",
				icon: "error"
			})
			_this.currentname = "暂无当前位置信息"
		}
	});
},

四、保存搜索记录：

HTML 部分

<view class="history-content" v-if="searchResults.length === 0">
	<view class="current_position">
		<view>
			<image src="@/static/images/task/history.png" class="position_img"</image>
			<text class="position_text">历史记录</text>
		</view>
		<view @click="clearHistory" class="clear_history">清空</view>
	</view>
	<view v-if="historyList.length===0" class="history_none" style="padding: 20px;">暂无历史记录</view>
	<ul>
		<li @click="checkdizhi(item)" v-for="(item,index) in historyList" :key="item.id" class="position_ul">
			<view>
				<image src="@/static/images/task/icon-positioning.png" style="width: 16px;height: 16px;margin-right: 7.5px;"></image>
			</view>
			<view class="address">
				<text class="address-name">{
   {item.name}}</text>
				<text class="current-address">{
   {item.district}}{
   {item.address}}</text>
			</view>
			<view class="distance_text">
				<text>{
   {item.distance}}</text>
			</view>
		</li>
	</ul>
</view>

CSS样式 

	// 选择地点历史记录
	.history-content {

		// 无历史记录提示信息
		.history_none {
			background-color: #fff;
			padding: 20px 10px;
			color: #C0C4CC;
		}

		// 提示信息（当前位置/历史记录）
		.current_position {
			padding: 12px 22px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.position_img {
				width: 12px;
				height: 12px;
				margin-right: 7.5px;
				line-height: 21px;
				vertical-align: middle;
			}

			.position_text {
				font-size: 12px;
				color: #303133;
				line-height: 21px;
			}

			// 清空历史
			.clear_history {
				font-size: 12px;
				color: #2979FF;
			}
		}
	}

 JavaScript部分

// import amapFile from '@/static/libs/amap-wx.130.js'; // 引入下载的组件js文件
        data() {
			return {
				timer: null,
				myAmapFun: null, // 高德获取地址
				keyword: '', // 用户输入的关键词
				searchResults: [], // 搜索提示结果
				historyList: [], // 历史记录
				gaodekey: 'key', // 高德的key
				currentname: "", // 地址标题
				currentaddress: "", // 已经获取到当前的位置
				city: '北京',
				addresstype: '',
				currentlat: '', // 当前位置纬度
				currentlng: '', // 当前位置经度
				currentdistancec: '', // 当前位置距离

			}
		},
		onLoad() {
			this.myAmapFun = new amapFile.AMapWX({
				key: this.gaodekey
			});
			this.getLocation();
			this.historyList = JSON.parse(uni.getStorageSync('history') || '[]')
		},

method 方法（clearHistory、saveSearchHistory） 

// 清空搜索历史记录
clearHistory() {
	uni.showModal({
		title: '提示',
		content: '是否清空搜索历史',
		success: (res) => {
			this.historyList = []
			uni.setStorageSync('history', '[]')
		}
	})
},
// 保存搜索历史并持久化
saveSearchHistory(item) {
	this.historyList.unshift(item) // 把新数据添加到数组最后
	const string = this.historyList.map((index) => JSON.stringify(index)) // 把数组每一项转为字符串
	const removeDupList = Array.from(new Set(string)) //去重后再转为数组
	const result = removeDupList.map((item) => JSON.parse(item)) // 把数组每一项转为对象
	uni.setStorageSync('history', JSON.stringify(result)) // 存到storage中
},

五、查看当前位置以及搜索地址之间距离

 

定义公共方法  传入两个位置的经纬度  （ latitude 纬度  longitude 经度 ）

function getDistances(lat1, lng1, lat2, lng2) {

    var radLat1 = rad(lat1);
    var radLat2 = rad(lat2);
    var a = radLat1 - radLat2;
    var b = rad(lng1) - rad(lng2);
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
        Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
    s = s * 6378.137; // EARTH_RADIUS;
    // 输出为公里
    s = Math.round(s * 10000) / 10000;

    var distance = s;
    var distance_str = "";

    if (parseInt(distance) >= 1) {
        // distance_str = distance.toFixed(1) + "km";
        distance_str = distance.toFixed(2) + "km";
    } else {
        // distance_str = distance * 1000 + "m";
        distance_str = (distance * 1000).toFixed(2) + "m";
    }

    
/*    // 可以反具体距离 也可以反对象 自己选择
    let objData = {
        distance: distance,
        distance_str: distance_str
    } */
    return distance_str
}
export default getDistances

 在getLocation ( 上方定义的获取当前位置的方法 )中获取当前位置经纬度

// 获取当前位置
getLocation() {
	const _this = this;
	_this.myAmapFun = new amapFile.AMapWX({
		key: this.gaodekey
	});
	uni.showLoading({
		title: '获取信息中'
	});
	// 成功获取位置
	_this.myAmapFun.getRegeo({
		success: (data) => {
			console.log(data, '当前定位');
			_this.currentname = `${data[0].desc}`
			_this.currentaddress = `${data[0].regeocodeData.formatted_address}`;
 			_this.currentlat = `${data[0].latitude}` // 当前位置纬度
			_this.currentlng = `${data[0].longitude}` // 当前位置经度	
            uni.hideLoading();
		},
		// 获取位置失败
		fail: (err) => {
			console.log(err, 'err')
			uni.showToast({
				title: "获取位置失败",
				icon: "error"
			})
			_this.currentname = "暂无当前位置信息"
		}
	});
},

 在searchTips( 上方定义的搜索关键字显示地址的方法 ) 中获取搜索位置的经纬度 

引入js文件

import getDistances from '@/utils/getDistances';

// 搜索地址
searchTips() {
	if (this.keyword === '') {
		this.searchResults = []
		return
	}
	const _this = this;
	// 发起搜索提示请求
	this.myAmapFun.getInputtips({
		keywords: this.keyword,
		city: this.city, //必须填写搜索的城市
		success(data) {
			if (data && data.tips) {
				const arr = JSON.parse(JSON.stringify(data.tips))
				for (let i of arr) {
					const str = i.location
					if (str.length !== 0) {
						const dis = str.split(',')
						const distance = getDistances(_this.currentlat, _this.currentlng,dis[1], dis[0])
						i.distance = distance
					}
				}
				_this.searchResults = arr;
			}
		},
	});
},

总结代码

<template>
	<view>
		<view class="area-header">
			<view class="header-select">
				<view class="select-region">
					<image src="@/static/images/task/icon-positioning.png" style="width: 16px;height: 16px;"></image>
					<text class="region_text">{
   {city}}</text>
					<image src="@/static/images/task/arrowdown.png" style="width: 12px;height: 12px;"
						@click="changeCity"></image>
				</view>
				<view class="select-input">
					<text class="input_holder" style="margin: 0 10px;">|</text>
					<input v-model="keyword" @input="input" placeholder-class="input_holder" placeholder="请输入地点" />
					<uni-icons type="search" size="22" style="margin-right: 15rpx;" color="#D8D8D8"></uni-icons>
				</view>
			</view>
		</view>
		<view class="area-site">
			<ul>
				<li @click="checkdizhi(item)" v-for="(item,index) in searchResults" :key="item.id" class="position_ul">
					<view>
						<image src="@/static/images/task/icon-positioning.png"
							style="width: 16px;height: 16px;margin-right: 7.5px;"></image>
					</view>
					<view class="address">
						<text class="address-name">{
   {item.name}}</text>
						<text class="current-address">{
   {item.district}}{
   {item.address}}</text>
					</view>
					<view class="distance_text">
						<text>{
   {item.distance}}</text>
					</view>
				</li>
			</ul>
		</view>
		<view class="history-content" v-if="searchResults.length === 0">
			<view class="current_position">
				<view>
					<image src="@/static/images/task/positioning.png" class="position_img"></image>
					<text class="position_text">当前位置</text>
				</view>
			</view>
			<view class="position_ul">
				<view>
					<image src="@/static/images/task/icon-positioning.png"
						style="width: 16px;height: 16px;margin-right: 7.5px;"></image>
				</view>
				<view class="address">
					<text class="address-name" @click="checkcurrent(currentaddress)">{
   {currentname}}</text>
					<text class="current-address" @click="checkcurrent(currentaddress)">{
   {currentaddress}}</text>
				</view>
				<view class="distance_text">
					<text>{
   {currentdistancec}}</text>
				</view>
			</view>
		</view>
		<view class="history-content" v-if="searchResults.length === 0">
			<view class="current_position">
				<view>
					<image src="@/static/images/task/history.png" class="position_img"></image>
					<text class="position_text">历史记录</text>
				</view>
				<view @click="clearHistory" class="clear_history">清空</view>
			</view>

			<view v-if="historyList.length===0" class="history_none" style="padding: 20px;">
				暂无历史记录
			</view>
			<ul>
				<li @click="checkdizhi(item)" v-for="(item,index) in historyList" :key="item.id" class="position_ul">
					<view>
						<image src="@/static/images/task/icon-positioning.png"
							style="width: 16px;height: 16px;margin-right: 7.5px;"></image>
					</view>
					<view class="address">
						<text class="address-name">{
   {item.name}}</text>
						<text class="current-address">{
   {item.district}}{
   {item.address}}</text>
					</view>
					<view class="distance_text">
						<text>{
   {item.distance}}</text>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import amapFile from '@/static/libs/amap-wx.130.js';
	import getDistances from '@/utils/getDistances';
	export default {
		data() {
			return {
				timer: null,
				myAmapFun: null, // 高德获取地址
				keyword: '', // 用户输入的关键词
				searchResults: [], // 搜索提示结果
				historyList: [], // 历史记录
				gaodekey: 'key', // 高德的key
				currentname: "", // 地址标题
				currentaddress: "", // 已经获取到当前的位置
				city: '北京',
				addresstype: '',
				currentlat: '', // 当前位置纬度
				currentlng: '', // 当前位置经度
				currentdistancec: '', // 当前位置距离

			}
		},
		onLoad(event) {
			this.myAmapFun = new amapFile.AMapWX({
				key: this.gaodekey
			});
			this.getLocation();
			this.historyList = JSON.parse(uni.getStorageSync('history') || '[]')
		},
		methods: {
			// 获取当前位置
			getLocation() {
				const _this = this;
				_this.myAmapFun = new amapFile.AMapWX({
					key: this.gaodekey
				});
				uni.showLoading({
					title: '获取信息中'
				});
				// 成功获取位置
				_this.myAmapFun.getRegeo({
					success: (data) => {
						console.log(data, '当前定位');
						_this.currentname = `${data[0].desc}`
						_this.currentaddress = `${data[0].regeocodeData.formatted_address}`;
						_this.currentlat = `${data[0].latitude}` // 当前位置纬度
						_this.currentlng = `${data[0].longitude}` // 当前位置经度
						_this.currentdistancec = getDistances(_this.currentlat, _this.currentlng, _this
							.currentlat, _this.currentlng, ) // 当前位置经度
						uni.hideLoading();
					},
					// 获取位置失败
					fail: (err) => {
						console.log(err, 'err')
						uni.showToast({
							title: "获取位置失败",
							icon: "error"
						})
						_this.currentname = "暂无当前位置信息"
					}
				});
			},
			// 搜索地址
			searchTips() {
				if (this.keyword === '') {
					this.searchResults = []
					return
				}
				const _this = this;
				// 发起搜索提示请求
				this.myAmapFun.getInputtips({
					keywords: this.keyword,
					city: this.city, //必须填写搜索的城市
					success(data) {
						if (data && data.tips) {
							const arr = JSON.parse(JSON.stringify(data.tips))
							for (let i of arr) {
								const str = i.location
								if (str.length !== 0) {
									const dis = str.split(',')
									const distance = getDistances(_this.currentlat,_this.currentlng, dis[1], dis[0])
									i.distance = distance
								}
							}
							_this.searchResults = arr;
						}
					},
				});
			},
			//搜索函数防抖
			input(e) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.searchTips()
				}, 500)
			},
			// 选择地址
			checkdizhi(item) {
				this.saveSearchHistory(item) // 保存历史记录
				const address = item.district + item.address + item.name
				if (this.addresstype == "startAddress") {
					uni.$emit('startAddress', address)
					uni.navigateBack({
						delta: 1 //返回上一页
					})
				}
				if (this.addresstype == "endAddress") {
					uni.$emit('endAddress', address)
					uni.navigateBack({
						delta: 1 //返回上一页
					})
				}
			},
			// 点击当前位置选择地址
			checkcurrent(item) {
				if (this.addresstype == "startAddress") {
					uni.$emit('startAddress', item)
					uni.navigateBack({
						delta: 1 //返回上一页
					})
				}
				if (this.addresstype == "endAddress") {
					uni.$emit('endAddress', item)
					uni.navigateBack({
						delta: 1 //返回上一页
					})
				}
			},
			// 清空搜索历史记录
			clearHistory() {
				uni.showModal({
					title: '提示',
					content: '是否清空搜索历史',
					success: (res) => {
						this.historyList = []
						uni.setStorageSync('history', '[]')
					}
				})
			},
			// 保存搜索历史并持久化
			saveSearchHistory(item) {
				this.historyList.unshift(item) // 把新数据添加到数组最后
				const string = this.historyList.map((index) => JSON.stringify(index)) // 把数组每一项转为字符串
				const removeDupList = Array.from(new Set(string)) //去重后再转为数组
				const result = removeDupList.map((item) => JSON.parse(item)) // 把数组每一项转为对象
				uni.setStorageSync('history', JSON.stringify(result))
			},
			// 改变城市
			changeCity() {
				uni.navigateTo({
					url: `/pages/task/area/selectregion`
				});
			},
		}
	}
</script>

<style lang="scss">
	#container {
		width: 300px;
		height: 200px;
	}

	// 搜索栏
	.area-header {
		background-color: #fff;
		padding: 22px 16px;

		.header-select {
			background-color: #F3F3F3;
			padding: 20rpx 5rpx;
			display: flex;
			align-items: center;

			// 左侧的城市名
			.select-region {
				padding-left: 5px;
				display: flex;
				align-items: center;
				width: 30%;
				justify-content: space-between;

				.region_text {
					font-size: 16px;
				}
			}

			// 右侧输入地址
			.select-input {
				display: flex;

				.input_holder {
					color: #D8D8D8;
					font-size: 16px;
				}
			}
		}
	}

	// 地址栏
	.position_ul {
		background-color: #fff;
		padding: 10px 20px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F3F3F3;

		.address {
			width: 75%;

			.address-name {
				font-size: 16px;
			}

			.current-address {
				margin-top: 2px;
				font-size: 12px;
				color: #C0C4CC;
				display: flex;
				flex-direction: column;
			}
		}

		.distance_text {
			width: 5%;
			margin-left: 10px;
			font-size: 12px;
			color: #C0C4CC;
		}

		// 位置距离
		.site-distance {}
	}

	// 选择地点历史记录
	.history-content {

		// 无历史记录提示信息
		.history_none {
			background-color: #fff;
			padding: 20px 10px;
			color: #C0C4CC;
		}

		// 提示信息（当前位置/历史记录）
		.current_position {
			padding: 12px 22px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.position_img {
				width: 12px;
				height: 12px;
				margin-right: 7.5px;
				line-height: 21px;
				vertical-align: middle;
			}

			.position_text {
				font-size: 12px;
				color: #303133;
				line-height: 21px;
			}

			// 清空历史
			.clear_history {
				font-size: 12px;
				color: #2979FF;
			}
		}
	}
</style>