微信小程序使用高德地图实现检索定位附近周边的POI功能示例

1、效果图

     

2、 实现过程

 1、登录高德地图开发者平台 高德开放平台 | 高德地图API，申请接口Key

 

2、在高德开发平台下载微信小程序SDK，https://lbs.amap.com/api/wx/download

 解压下载的文件得到 amap-wx.js ，在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js 文件拷贝到 libs 的本地目录下。

3、微信小程序后台添加安全域名（这个必须设置，不然无法使用定位功能）

登录微信公众平台，在 "设置" → "开发设置" 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去，如下图所示：

 

  4、具体代码

<template>
	<view class="content">
		<!-- 	<view class="btns">
			<view @click="back">取 消</view>
			<view @click="getCurrentLocation">获取当前地址</view>
		</view> -->
		<view class="inputCon">
			<view class="searchView">
				<text class="iconfont icon-sousuo"  @click="searchFn"></text>
				<input type="text" placeholder="搜索地点" v-model="searchWords" confirm-type="search" @confirm="searchFn" />
				<text @click="cancel">取消</text>
			</view>
		</view>
		<!-- 地图部分 -->
		<view class="content-map">
			<map style="width: 100%;height: 100%;" v-if="mapFlafg" :latitude="latitude" :longitude="longitude" :markers="markers"
				@tap="tap"  :scale="16"  :title="title"/>
		</view>
		<!-- <view id="container"></view> -->
		<!--  搜索框 -->

		<!--  地点列表部分 -->
		<view class="list">
			<view class="item" v-for="(add,index) in dataTips" :key="add.id" @click="select(add,index)"
				:class="selectIndex==index?'active':''">
				<view class="name">{{add.name}}</view>
				<view class="address">{{add.district || ''}}{{add.address || ''}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入高德地图api提供的微信小程序的接口
	import amapFile from '@/packageB/pages/map/amap-wx.130.js';
	// 创建地图
	var myAmapFun = new amapFile.AMapWX({
		key: ''
	}); //key值要申请为 去高德地图申请微信小程序的key
	// var myAmapFun = new amapFile.AMapWX({key: ''}); //key我的
	export default {
		data() {
			return {
				mapFlafg:false,
				selectIndex: undefined,
				selectAddr: {},
				searchWords: "",
				id: 1, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.91667, // 纬度
				longitude: 116.41667, // 经度

				markers: [{
					latitude: 39.91667, // 纬度
					longitude: 116.41667, // 经度
					width: 30,
					height: 30,
					iconPath: ''
					// iconPath: '../../static/ditu.png'
				}],
				dataTips: []
			}
		},
		onLoad() {
			var self = this;
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					console.log(res, '当前地址定位');
					if (res.errMsg == "getLocation:ok") {
						console.log(self.mark, 'onload里面看看');
						self.longitude = res.longitude;
						self.latitude = res.latitude;
						self.$set(self.markers[0],"longitude",res.longitude);
						self.$set(self.markers[0],"latitude",res.latitude);
						self.mapFlafg=true;
						console.log(self.markers,"markers")
						// self.markers[0].longitude = res.longitude;
						// self.markers[0].latitude = res.latitude;
					}
				},
				complete: () => {
					// 获取当前位置的地点列表
					myAmapFun.getPoiAround({
						location: self.longitude + ',' + self.latitude,
						success: (data) => {
							console.log("获取当前的列表", data);
							this.dataTips = data.poisData;
						},
						fail: (info) => {
							console.log(info, '点击地图错误信息1')
						}
					})
				}
			});
			
		},
		methods: {
			cancel() {
				if (this.searchWords) {
					this.searchWords = "";
					myAmapFun.getPoiAround({
						location: this.markers[0].longitude + ',' + this.markers[0].latitude,
						success: (data) => {
							console.log("获取当前的列表", data);
							this.$nextTick(() => {
								this.dataTips = data.poisData;
							})
						},
						fail: (info) => {
							console.log(info)
						}
					})
				}
			},
			reserGeo() {
				myAmapFun.getRegeo({
					success: (data) => {
						console.log("getRegeo", data);
					},
					fail: (info) => {
						console.log(info)
					}
				})
			},
			// 根据地址列表中选择某一个地点
			select(add, index) {
				if (!add) {
					return;
				}
				this.selectIndex = index;
				var location = add.location.split(",");
				console.log(location, add, '列表地点的经纬度');
				this.selectAddr = {
					address: add.pname ? (add.pname + add.cityname + add.adname) : (add.district + add
						.address),
					detailAddress: add.address,
					latitude: location[1],
					longitude: location[0]
				};
				this.markers[0].latitude = +location[1];
				this.markers[0].longitude = +location[0];
				uni.setStorageSync("address", this.selectAddr.address);
				// 选择地点后，将选取的地点传递到前一个页面中
				var pages = getCurrentPages(); // 获取所有的页面栈
				var prevPage = pages[pages.length - 2]; // 找到上一个页面，注意是页面，如果是页面中有组件，则需要通过页面接受到数据后，再次往组件中传递
				prevPage.$vm.userAddress.locationAddress = this.selectAddr.address; //在上一个页面中就可以用userAddress进行接收
				prevPage.$vm.userAddress.detail = this.selectAddr.detailAddress; //在上一个页面中就可以用userAddress进行接收
				prevPage.$vm.selectAddr = this.selectAddr;
				prevPage.$vm.address = {
					province: add.pname,
					city: add.cityname,
					district: add.adname,
				}
				uni.navigateBack({
					delta: 1
				});

			},
			// 在地图上点击进行选点，这个选点在地图缩放比例较大时无效，因为精读的问题。
			tap(e) {
				console.log(e, '点击了地图');
				var location = e.detail.longitude + ',' + e.detail.latitude
				myAmapFun.getRegeo({
					location: location,
					success: (data) => {
						console.log("获取指定定位信息", data);
						this.selectAddr = {
							address: data[0].regeocodeData.formatted_address,
							latitude: e.detail.latitude,
							longitude: e.detail.longitude
						};
						this.markers[0].latitude = data[0].latitude;
						this.markers[0].longitude = data[0].longitude;
						myAmapFun.getPoiAround({
							location: data[0].longitude + ',' + data[0].latitude,
							success: (data) => {
								console.log("获取当前的列表", data);
								this.dataTips = data.poisData;
							},
							fail: (info) => {
								console.log(info, '点击地图错误信息1')
							}
						})
					},
					fail: (info) => {
						console.log(info, '点击地图错误信息2');
					}
				})
			},
			// 根据内容进行检索
			searchFn() {
				console.log("根据地址检索", this.searchWords);
				myAmapFun.getInputtips({
					keywords: this.searchWords,
					location: '',
					success: (data) => {
						console.log(111, data);
						if (data && data.tips) {
							this.dataTips = data.tips;
						}
					},
					fail: data => {
						console.log(222, data);
					}
				})
			},
			// getCurrentLocation() {
			// 	let that = this
			// 	uni.getLocation({
			// 		type: 'wgs84',
			// 		success: function(res) {
			// 			console.log(res, '当前地址定位');
			// 			if (res.errMsg == "getLocation:ok") {
			// 				console.log(that.mark, 'onload里面看看');
			// 				this.longitude = res.longitude;
			// 				this.latitude = res.latitude;
			// 				this.markers[0].longitude = res.longitude;
			// 				this.markers[0].latitude = res.latitude;
			// 			}
			// 		}
			// 	});
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.btns {

		position: fixed;
		top: 0;
		left: 0;
		height: 260upx;
		width: 100%;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10 !important;

		view {
			border-radius: 10%;
			margin: 100upx 24upx 0;
			font-size: 30upx;

			&:first-child {
				color: #fff;
			}

			&:last-child {
				width: 100upx;
				height: 60upx;
				line-height: 60upx;
				text-align: center;
				border-radius: 10upx;
				background: #20c295;
				color: #fff;
			}
		}
	}

	.content {
		// position: relative;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.content-map {
			width: 100%;
			height: 50vh;
		}

		.list {
			// flex: 0 1 calc(50vh - 10upx);
			border-radius: 30rpx;
			background-color: #fff;
			// position: absolute;
			// bottom:-660rpx;
			height: calc(50vh - 10upx);
			overflow-y: auto;
			width: 100%;
			margin: 0upx auto 0;
			padding-bottom: 20upx;

			.item {
				border-bottom: 2upx solid #f3f3f3;
				padding: 0 30rpx;

				&:last-child {
					border: none;
				}

				.address {
					font-size: 22upx;
					color: #666;
					margin: 10upx 0;
				}

				.name {
					font-size: 30upx;
					color: #333;
					margin-top: 10upx;
				}

				&.active {
					.name {
						font-weight: bold;
						color: #E13500;
					}

					.address {
						color: #E13500;
					}
				}
			}
		}

		.inputCon {
			flex: 0 1 108rpx;
			width: 100%;
			background: #fff;
			// top: -60upx;
			// position: relative;
			z-index: 20;
			// height: 100upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.searchView {
				width: 702upx;
				height: 60upx;
				display: flex;
				align-items: center;
				line-height: 60upx;
				border-radius: 40upx;
				padding: 0 30upx;
				box-sizing: border-box;
				background: #f3f3f3;
				font-size: 26upx;

				.iconfont {
					color: #666;
					margin-right: 20upx;
				}

				input {
					flex: 1;
				}

				view {
					flex-shrink: 0;
				}
			}
		}

	}
</style>