<template>
<div style="position: relative;">
<div ref="container" id="container" style="width: 100%; height: 500px;"></div>
<el-input
v-model="address"
style="width: 100%; border-radius: 10px; position: absolute; top: 10px; left: 20px; width: 65%; display: flex; z-index: 99999;"
placeholder="请输入地址"
:suffix-icon="Search"
@input="bindChangeItem"
/>
<div class="waterfall-main" v-if="showMore">
<div class="address-item-list" v-for="item in addressData" :key="item.id" @click="bindChangeAdress(item)">
<span>{{ item.title }}</span>
<span class="address-item-list-right">{{ item.address }}</span>
</div>
</div>
</div>
<!-- <div class="address">
<el-form :model="form" label-width="auto" style="margin-top: 20px; width: 200px;">
<el-form-item label="区域">
<el-input v-model="form.name" />
</el-form-item>
</el-form>
</div> -->
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { debounce } from 'lodash';
import { jsonp } from "vue-jsonp";
const container = ref(null);
const address = ref('')
const addressData = ref<any \[\]>(\[\])
const showMore = ref(false)
const form = ref({
name: ''
})
let map:any = null
let markerLayer:any = null;
// 或者在Vue生命周期钩子中创建地图实例（推荐）
onMounted(() => {
console.log('333')
console.log((window as any).TMap)
if ((window as any).TMap) {
nextTick(()=> {
map = new (window as any).TMap.Map(container.value, {
center: new (window as any).TMap.LatLng(39.916527, 116.397128),
zoom: 15,
});
markerLayer = new (window as any).TMap.MultiMarker({
map: map
})
})
} else {
console.error("TMap API 未加载");
}
});
const bindChangeItem = debounce(() => {
console.log('搜索内容:', address.value);
if (address.value) {
const key = 'key'; // 替换为你的腾讯地图 API 密钥
// 构建请求 URL
const url = `https://apis.map.qq.com/ws/place/v1/suggestion\`;
jsonp (url, {
key: key,
region: '北京市',
output: "jsonp",
keyword: address.value,
}).then((res)=> {
console.log(res)
addressData.value = res.data
})
showMore.value = true
}
}, 3000)// 1000 毫秒的防抖时间
const bindChangeAdress = (item: any)=> {
console.log(item)
address.value = item.title
showMore.value = false
handleChange(item)
}
// 选中地址 设置当前点位
const handleChange = (object: any) => {
setMapMarker(object)
}
// 放置地图点位
const setMapMarker = (locationObj: any) => {
const { lat, lng } = locationObj.location
markerLayer.setGeometries(\[\])
markerLayer.add({
position: new (window as any).TMap.LatLng(lat, lng)
})
// 自动定位到中间
const bounds = new (window as any).TMap.LatLngBounds()
bounds.extend(new (window as any).TMap.LatLng(lat, lng))
map.fitBounds(bounds)
}
</script>
<style lang="scss" scoped>
.waterfall-main {
width: 65%;
position: absolute;
left: 20px;
top: 50px;
background: #fff;
z-index: 99999;
font-size: 14px;
padding: 10px 20px;
cursor: pointer;
.address-item-list {
line-height: 30px;
.address-item-list-right {
margin-left: 10px;
color: rgb(131, 131, 131);
font-size: 12px;
}
}
// .address :deep(.el-input__inner .el-input__wrapper) {
// border: 1px solid red !important;
// }
}
</style>