vue3 引入腾讯地图 进行地点搜索以及mark

<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>

相关推荐
TimelessHaze27 分钟前
拆解字节面试题:async/await 到底是什么?底层实现 + 最佳实践全解析
前端·javascript·trae
OpenTiny社区1 小时前
TinyEngine 2.8版本正式发布:AI能力、区块管理、Docker部署一键强化,迈向智能时代!
前端·vue.js·低代码
qfZYG1 小时前
Trae 编辑器在 Python 环境缺少 Pylance,怎么解决
前端·vue.js·编辑器
bug爱好者1 小时前
Vue3 基于Element Plus 的el-input,封装一个数字输入框组件
前端·javascript
乔公子搬砖2 小时前
小程序开发提效:npm支持、Vant Weapp组件库与API Promise化(八)
前端·javascript·微信小程序·js·promise·vagrant·事件绑定
没烦恼3013 小时前
登录表单提交:按钮点击事件 vs form submit事件,该如何选择?
javascript
北辰浮光4 小时前
[Web数据控制]浏览器中cookie、localStorage和sessionStorage
前端·vue.js·typescript
用户841794814564 小时前
vue 如何使用 vxe-table 来实现跨表拖拽,多表联动互相拖拽数据
前端·vue.js
好好好明天会更好4 小时前
Vue中this.$options.data()是什么东西?
前端·vue.js
scorpion_V4 小时前
WebRTC 结合云手机:释放实时通信与虚拟手机的强大协同效能
vue.js·智能手机·webrtc