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 @click="aaaa" class="nav-bar-title">选择地址</text>
		</view>

	<!-- 	<view class="city-picker-box">
			<picker mode="region" @change="handleCityChange">
				<view class="city-picker">
					<text>{{ selectedCity }}</text>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</picker>
		</view> -->
		<uni-popup ref="filterPopup" type="top" :animation="false" :is-mask-click="false"
		  mask-background-color="rgba(0, 0, 0, 0.4)">
		  <view class="white-popup">
			  <view class="icon-title-navBar-box">
			     <view @click="goUpPage2" class="nav-bar-icon"></view>
			     <text class="nav-bar-title">返回</text>
			  </view>
			     <t-index-address @select="select"></t-index-address>
		  </view>
		</uni-popup>
		<!-- 查询职业 -->
		<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">
			<!--  #ifdef H5   -->
			<view v-for="(item,index) in result.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>
			<!--   #endif   -->
			<!--  #ifdef APP   -->
			<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>
			<!--   #endif   -->
		</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', 'currentWeizhi'])
	const {
		getPositionSearchByKeyword
	} = useCustomMap();
	
	const result = ref(null);
	const filterPopup = ref(null);
	const selectedCity = ref('选择城市'); // 默认显示“选择城市”
	function select(data){
		console.log('data',data);
	}
	function goUpPage2(data){
		console.log('data',data);
	}
	function aaaa(data){
		console.log('data',data);
		filterPopup.value.open("top")
	}
	
	function handleCityChange(e) {
		//const city = e.detail.value[1]; // 获取选择的城市
		//	selectedCity.value = city;
		// 根据选择的城市更新地图中心点
		getCityLocation("北京");
	}
	 function getCityLocation(city) {
		console.log('222222');
		const Key = `KBYBZ-FS3KZ-U2FXR-7VPDX-L7J46-23F55`
		const url = `https://apis.map.qq.com/ws/geocoder/v1/?address=${city}&key=${Key}`;

		uni.request({
			url: url,
			method: 'get',
			timeout: 20000,
		}).then(res => {
			console.log('res', res);
			if (res.data && res.data.result && res.data.result.location) {
				const cityLocation = res.data.result.location;
				console.log('cityLocation', cityLocation);
				if (cityLocation) {
					data.latitude = cityLocation.lat;
					data.longitude = cityLocation.lng;
					data.covers[0].latitude = cityLocation.lat;
					data.covers[0].longitude = cityLocation.lng;
					// 重新搜索附近的地点
					getPositionSearchByKeyword(data.keyword || '公司',
						`nearby(${cityLocation.lat},${cityLocation.lng},1000)`,
						onSuccess, onError, {
							page: 1,
							size: 3,
						});
				}
			}
		}).catch(err => {
			console.log('err')

		}).finally(() => {

		})
		return 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
		// #ifdef H5
		if (res && res.data && res.data.length > 0) {
			// 获取第一个搜索结果的经纬度
			const firstResult = res.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
			}];
		}
		// #endif
		// #ifdef APP
		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
			}];
		}
		// #endif
	}

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

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

	}

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

	}

	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>