uniapp小程序使用高德地图

第一步：配置全局地图参数

**注意：需要修改文件的最后导出方式 改为：export default { AMapWX };

// 下载高德地图的amap-wx.130.js 文件
import AMapWX from '@/common/utils/amap-wx.130.js'

// 高德地图 申请好的Web端开发者 Key
const mapKey = ''

// 创建地图
const useAMapWX = new AMapWX.AMapWX({key: mapKey })

export {
	useAMapWX,
	mapKey
}

第二步：布局页面

<template>
	<view class="selectContent">
		<view class="btns">
			<view @click="back">取消</view>
			<view @click="confirm">完成</view>
		</view>
		<!-- 地图部分 -->
		<map style="width: 100%; height: 60vh;" :latitude="latitude" :longitude="longitude" :markers="markers"
			:include-points="markers" @tap="tapMap" :scale="5" />
		<!-- 搜索框 -->
		<view class="inputCon">
			<view class="searchView">
				<text class="iconfont icon-sousuo"></text>
				<input type="text" placeholder="搜索地点" v-model="searchWords" confirm-type="search" @confirm="searchAddressInfo" />
				<text @click="cancel">取消</text>
			</view>
		</view>
		<!-- 附近列表 -->
		<view class="addressClass">
			<nut-radio-group v-model="selectedPositionRadio">
				<nut-cell class="position-item" v-for="(item, index) in dataTips" :key="'pos' + index"
					@click="selectPoint(item, index)" :title="item.name" :sub-title="item.address" round-radius="0">
					<template #icon>
						<nut-icon name="location2" custom-color="#4072f4" size="26"></nut-icon>
					</template>
					<template #link>
						<nut-radio :label="'pos' + index" />
					</template>
				</nut-cell>
			</nut-radio-group>
		</view>
	</view>
</template>
<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import { useRouter } from '@/common/utils/router.js';
	import { showToast } from '@/common/utils/toast.js';
	import GpsUtils from '@/common/utils/GpsUtils.js';
	import { useAMapWX } from "@/common/service/mapConfig.js"

	const {
		getCurrLocation
	} = GpsUtils;
	const router = useRouter();
	const latitude = ref()
	const longitude = ref()
	const selectedPositionRadio = ref('')
	const selectedPosition = ref({})
	const searchWords = ref('')
	const title = ref('map')
	const markers = ref([{
		id: '888',
		latitude: 39.909,
		longitude: 116.39742,
		width: 30,
		height: 30,
	}])
	// 搜素得列表数据
	const dataTips = ref([])
	// 确认选择得数据信息
	let locationInfo = {}

	onMounted(() => {
		queryCurrLocation()
	})

	// 获取当前位置信息
	function queryCurrLocation() {
		getCurrLocation({
			success: (res) => {
				latitude.value = res.latitude
				longitude.value = res.longitude
				queryCrrSiteList()
			}
		})
	}

	// 获取当前位置地点列表
	function queryCrrSiteList() {
		useAMapWX.getPoiAround({
			location: longitude.value + ',' + latitude.value,
			success: (data) => {
				dataTips.value = data.poisData;
			},
			fail: (info) => {
				showToast.text('获取当前位置地点列表失败')
			}
		})
	}

	// 点击地图触发
	function tapMap(even) {
		const res = even.detail
		latitude.value = res.latitude
		longitude.value = res.longitude
		queryCrrSiteList()
	}

	// 选择指定位置信息时候事件
	function selectPoint(position, index) {
		selectedPositionRadio.value = 'pos' + index;
		selectedPosition.value = position;
		const location = position.location.split(',')
		markers.value[0].latitude = location[1]
		markers.value[0].longitude = location[0]
		
		// 构建数据信息
		locationInfo = {
			province: position.pname,
			city: position.cityname,
			district: position.adname,
			township: position.address,
			formattedAddress: position.pname + position.cityname + position.adname + position.address + position.name,
			address: {
				title: position.address,
				desc: position.address,
				name: position.name
			},
			latitude: location[1],
			longitude: location[0]
		}
	}

	// 搜索位置信息
	function searchAddressInfo() {
		useAMapWX.getInputtips({
			keywords: searchWords.value,
			success: (data) => {
				if (data && data.tips) {
					const searchInfo =  []
					data.tips.forEach(item =>{
						if(item.location && item.location.length != 0){
							searchInfo.push(item)
						}
					})
					dataTips.value = searchInfo
				}
			},
			fail: data => {
				showToast.text('搜索位置信息失败')
			}
		})
	}
	
	// 取消搜索
	function cancel(){
		searchWords.value = ''
	}
	
	// 确定数据
	function confirm(){
		if(!selectedPositionRadio.value){
			showToast.text('请选择一个位置后再点击完成')
			return
		}
		router.back({
			selectedPosition: {details:locationInfo}
		})
	}
	
	// 返回
	function back(){
		uni.navigateBack();
	}
	
</script>

<style scoped lang="scss">
	.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 {
			margin: 150upx 24upx 0;
			font-size: 30upx;

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

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

	.selectContent {
		overflow: hidden;

		.list {
			height: calc(40vh - 100upx);
			overflow-y: auto;
			width: 702upx;
			margin: -40upx auto 0;
			padding-bottom: 20upx;

			.item {
				border-bottom: 2upx solid #f3f3f3;

				&: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 {
			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;
				}
			}
		}

	}

	.addressClass {
		width: 100%;
		height: calc(30vh + 60upx);
		overflow-y: auto;
		top: -60upx;
		position: relative;
	}
</style>