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>

相关推荐
像风一样自由20204 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊5 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理5 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef067 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端8 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder9 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句9 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom9 小时前
JavaScript reduce()函数详解
javascript
小飞悟9 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子9 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript