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>

相关推荐
ღ_23331 小时前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·javascript·vue.js
xiaohe06011 小时前
🔒 JavaScript 不是单线程吗?怎么还能上“锁”?!
javascript·github
摸着石头过河的石头1 小时前
JavaScript继承的多种实现方式详解
前端·javascript
Ashley的成长之路2 小时前
NativeScript-Vue 开发指南:直接使用 Vue构建原生移动应用
前端·javascript·vue.js
朕的剑还未配妥2 小时前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·vue.js
JNU freshman2 小时前
Element Plus组件
前端·vue.js·vue3
软件技术NINI3 小时前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
知识分享小能手3 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
长空任鸟飞_阿康3 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
苏打水com3 小时前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html