uniProject/components/customMap/customMap.vue

<template>
	<view class="map-popup-box">
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">选择地址</text>
		</view>
		<!-- 查询职业 -->
		<view class="phone-search-box">
			<input class="search-input" placeholder="请输入地址" v-model="data.keyword" />
			<view class="search-icon" @click="handleClick">
				<uni-icons type="search" size="24" color="#fff"></uni-icons>
			</view>
		</view>
		<map style="width: 100%; height: 300px;" :latitude="data.latitude" :longitude="data.longitude"
			:markers="data.covers" :show-location="true"> </map>

		<view v-if="result" class="map-card-list">
			<view v-for="(item,index) in result.data.data" key="index" @click="xuanzeAdress(item)" class="map-card-box">
				<view>
					<view class="map-card-title"><text v-if="index==0" class="dqwz-text">当前位置</text>{{item.title}}
					</view>
					<view class="map-card-address">{{item.address}}</view>
				</view>
				<icon class="map-active-icon" v-if="index==0"></icon>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue"
	import myIcon from "@/static/images/common/markIcon.png"

	import {
		onLoad,
		onHide,
		onShow
	} from "@dcloudio/uni-app"
	import {
		useCustomMap
	} from "@/components/customMap/useMap.js"

	const emits = defineEmits(['close', 'xuanzeAdress'])
	const {
		getPositionSearchByKeyword
	} = useCustomMap();

	const result = ref(null);

	function handleClick() {
		if (data.keyword) {
			getPositionSearchByKeyword(data.keyword, `nearby(${data.latitude},${data.longitude},1000)`, onSuccess,
				onError, {
					page: 1,
					size: 3,
				})
		}
	}

	function onSuccess(res) {
		console.log('数据', res);
		result.value = res
		if (res.data && res.data.data && res.data.data.length > 0) {
					// 获取第一个搜索结果的经纬度
					const firstResult = res.data.data[0];
					const newLatitude = firstResult.location.lat; // 纬度
					const newLongitude = firstResult.location.lng; // 经度
		
					// 更新地图的中心点
					data.latitude = newLatitude;
					data.longitude = newLongitude;
		
					// 更新标记点
					data.covers = [{
						latitude: newLatitude,
						longitude: newLongitude,
						iconPath: myIcon, // 使用你的图标路径
						width: 30,
						height: 30
					}];
				}
		
	}

	function onError(err) {
		console.log('错误', err)
	}

	function goUpPage(err) {
		console.log('错误', err)
		emits('close');

	}

	function xuanzeAdress(item) {
		console.log('item');
		emits('xuanzeAdress', item.address);

	}

	const data = reactive({
		keyword: '', // 关键字
		id: 0, // 使用 marker点击事件 需要填写id
		title: 'map',
		latitude: 0,
		longitude: 0,
		covers: [{
			latitude: 0,
			longitude: 0,
			iconPath: myIcon,
			width: 30,
			height: 30
		}]
	})

	// 初始化
	function initLocation() {
		console.log('init')
		uni.getLocation({
			type: 'gcj02',
			success: function(res) {
				console.log('res', res)
				data.longitude = res.longitude;
				data.latitude = res.latitude;
				data.covers[0].longitude = res.longitude;
				data.covers[0].latitude = res.latitude;
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				// 获取当前位置附近的数据
				getPositionSearchByKeyword('公司', `nearby(${res.latitude},${res.longitude},1000)`, onSuccess,
					onError, {
						page: 1,
						size: 3,
					});
			}
		});
	}

	onLoad(() => {
		console.log('初始化')
		initLocation();
	})
</script>

<style>

</style>