1

components/customMap/customMap.vue

@@ -4,6 +4,17 @@
 			<view @click="goUpPage" class="nav-bar-icon"></view>
 			<text 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>
+
+
 		<!-- 查询职业 -->
 		<view class="phone-search-box">
 			<input class="search-input" placeholder="请输入地址" v-model="data.keyword" />
@@ -15,7 +26,7 @@
 			:markers="data.covers" :show-location="true"> </map>
 
 		<view v-if="result" class="map-card-list">
-      <!--  #ifdef H5   -->
+			<!--  #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}}
@@ -24,17 +35,17 @@
 				</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   -->
+			<!--   #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>
@@ -55,12 +66,56 @@
 		useCustomMap
 	} from "@/components/customMap/useMap.js"
 
-	const emits = defineEmits(['close', 'xuanzeAdress','currentWeizhi'])
+	const emits = defineEmits(['close', 'xuanzeAdress', 'currentWeizhi'])
 	const {
 		getPositionSearchByKeyword
 	} = useCustomMap();
 
 	const result = ref(null);
+	const selectedCity = ref('选择城市'); // 默认显示“选择城市”
+
+	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) {
@@ -75,48 +130,48 @@
 	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
+		// #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) {
@@ -130,7 +185,7 @@
 	}
 
 	function xuanzeAdress(item) {
-		console.log('item',item);
+		console.log('item', item);
 		emits('xuanzeAdress', item.address);
 		emits('currentWeizhi', item.location);