officialAccount/pages/map/index.vue

<template>
	<view class="container">
		<!-- 顶部搜索框 -->
		<view class="search-bar">
			<input type="text" v-model="keyword" placeholder="搜索地点" @confirm="onSearch" />
			<button @click="onSearch">搜索</button>
		</view>

		<!-- 地图展示区 -->
		<view id="map" class="map"></view>

		<!-- 搜索结果列表 -->
		<view class="result-list" v-if="pois.length">
			<view class="poi-item" v-for="(poi, idx) in pois" :key="idx" @click="selectPoi(poi)">
				<text class="poi-name">{{ poi.name }}</text>
				<text class="poi-address">{{ poi.address }}</text>
			</view>
		</view>

		<!-- 默认提示区 -->
		<view class="info" v-else>
			<text>请选择或搜索地点</text>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';


// const route = useRoute();
const defaultLat =  39.9042;
const defaultLng =  116.4074;

const keyword = ref('');
const pois = ref([]);
let map = null;
let marker = null;

function initMap(lat, lng) {
	const center = new qq.maps.LatLng(lat, lng);
	map = new qq.maps.Map(document.getElementById('map'), {
		center,
		zoom: 15,
	});
	marker = new qq.maps.Marker({
		position: center,
		map,
	});
}

// 这里替换成你的腾讯地图 Web 服务 API Key
// const TENCENT_MAP_KEY = 'WTPBZ-L3O3T-L6SXZ-VOPZA-FU77K-MPB2G';

async function onSearch() {
	const kw = keyword.value.trim();
	if (!kw) {
		uni.showToast({
			title: '请输入搜索内容',
			icon: 'none',
		});
		return;
	}
	pois.value = [];

	// 获取地图中心点做为搜索中心
	const center = map.getCenter();
	const lat = center.getLat();
	const lng = center.getLng();
	console.log("????",url)
	const url = `https://apis.map.qq.com/ws/place/v1/search?keyword=${encodeURIComponent(kw)}&boundary=nearby(${lat},${lng},1000)&key=WTPBZ-L3O3T-L6SXZ-VOPZA-FU77K-MPB2G`;
	
	try {
		const res = await fetch(url);
		const data = await res.json();
		if (data.status === 0 && data.data && data.data.length > 0) {
			// 转换数据格式方便展示
			pois.value = data.data.map(item => ({
				name: item.title,
				address: item.address,
				lat: item.location.lat,
				lng: item.location.lng,
			}));
		} else {
			uni.showToast({
				title: '未搜索到结果',
				icon: 'none',
			});
		}
	} catch (error) {
		console.error('搜索失败:', error);
		uni.showToast({
			title: '搜索失败',
			icon: 'none',
		});
	}
}

function selectPoi(poi) {
	const pos = new qq.maps.LatLng(poi.lat, poi.lng);
	map.setCenter(pos);
	marker.setPosition(pos);
}

onMounted(() => {
	initMap(defaultLat, defaultLng);
});
</script>

<style scoped>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.search-bar {
	display: flex;
	padding: 8px;
	background: #fff;
}

.search-bar input {
	flex: 1;
	padding: 6px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.search-bar button {
	margin-left: 8px;
	padding: 6px 12px;
	background-color: #1aad19;
	color: #fff;
	border: none;
	border-radius: 4px;
}

.map {
	flex: 1;
}

.result-list {
	max-height: 200px;
	overflow-y: auto;
	background: #fff;
}

.poi-item {
	padding: 8px;
	border-bottom: 1px solid #eee;
}

.poi-name {
	font-weight: bold;
}

.poi-address {
	font-size: 12px;
	color: #666;
}

.info {
	padding: 16px;
	background: #fff;
	text-align: center;
	color: #999;
}
</style>