170 lines
3.2 KiB
Vue
170 lines
3.2 KiB
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>
|