vue3使用腾讯地图选择地点

<template> <div> <el-dialog width="60%" :before-close="cancel" v-model="props.visible"> <span> <el-autocomplete v-model="addressKeyword" placeholder="请输入地址，例如临沂人民广场" clearable style="margin-bottom:20px;width:100%;" :fetch-suggestions="querySearch" @select="handleSelect"> <template #append> <el-button icon="el-icon-search" @click="getAddressKeyword"></el-button> </template> </el-autocomplete> <div id="container" style="width:100%;height:600px;"></div> </span> <template #footer> <span class="dialog-footer"> <el-button @click="cancel">取 消</el-button> <el-button type="primary" @click="confirm">确 定</el-button> </span> </template> </el-dialog> </div> </template> <script setup> import { ref, reactive, onMounted, nextTick } from "vue"; import md5 from 'js-md5'; import { jsonp } from 'vue-jsonp' var markerLayer const markersArray = ref([]); const restaurants = ref([]); const map = ref(null); const getAddress = ref(null); const getAddCode = ref(null); const addressKeyword = ref(''); const shopInfo = reactive({ lng: '', lat: '', address: '' }); const props = defineProps({ visible: Boolean }) onMounted(() => { nextTick(() => { init() }) }) // 初始化地图 const init = () => { // 定义地图中心点坐标 var center = new window.TMap.LatLng(35.05151, 118.34787) // 定义map变量，调用 TMap.Map() 构造函数创建地图 map.value = new window.TMap.Map(document.getElementById('container'), { center: center, // 设置地图中心点坐标 zoom: 13, // 设置地图缩放级别 pitch: 0, // 设置俯仰角 rotation: 0 // 设置地图旋转角度 }) // 获取点击后的地址 map.value.on('click', function (event) { shopInfo.address = event.poi.name // 获取点击后的地图坐标并设置Marker shopInfo.lng = event.latLng.lng shopInfo.lat = event.latLng.lat if (markerLayer) { markerLayer.setGeometries([]) } markerLayer = new window.TMap.MultiMarker({ map: map.value, styles: { // 点标记样式 marker: new window.TMap.MarkerStyle({ width: 20, // 样式宽 height: 30, // 样式高 anchor: { x: 10, y: 30 }, // 描点位置 src: ' mapapi.qq /web/lbs/javascriptGL/demo/img/markerDefault.png' // 标记路径 }) } }) // markerLayer.add({ position: event.latLng }) markerLayer.add({ id: shopInfo.lat, position: new window.TMap.LatLng(shopInfo.lat, shopInfo.lng) }) }) if (lat && lng) { if (markerLayer) { markerLayer.setGeometries([]) } markerLayer = new window.TMap.MultiMarker({ map: map.value, styles: { // 点标记样式 marker: new window.TMap.MarkerStyle({ width: 20, // 样式宽 height: 30, // 样式高 anchor: { x: 10, y: 30 }, // 描点位置 src: ' mapapi.qq /web/lbs/javascriptGL/demo/img/markerDefault.png' // 标记路径 }) } }) markerLayer.updateGeometries({ id: lat, position: new window.TMap.LatLng(lat, lng) }) map.value.setCenter(new window.TMap.LatLng(lat, lng)) } } const querySearch = (queryString, cb) => { var results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value // 调用 callback 返回建议列表的数据 cb(results) } const createFilter = (queryString) => { return (restaurant) => { return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0) } } const handleSelect = (item) => { // 腾讯地图文档： lbs.qq /faq/serverFaq/webServiceKey // csdn参考： blog.csdn.net/tiankonlan/article/details/126363935 // 申请的key：import.meta.env.VITE_APP_TMapKey 签名：import.meta.env.VITE_APP_TMapSig let str = `/ws/geocoder/v1/?address=${item || addressKeyword.value}&callback=jsonpCallback&key=${import.meta.env.VITE_APP_TMapKey}&output=jsonp${import.meta.env.VITE_APP_TMapSig}` let sig = md5(str); sig = encodeURI(sig) let getData = { address: item || addressKeyword.value, callbackQuery: 'callback', callbackName: 'jsonpCallback', output: 'jsonp', key: import.meta.env.VITE_APP_TMapKey, sig: sig } jsonp(' apis.map.qq /ws/geocoder/v1/', getData).then(response => { if (response.message === '查询无结果') { alert('查询无结果') return false } shopInfo.lng = response.result.location.lng shopInfo.lat = response.result.location.lat if (markerLayer) { markerLayer.setGeometries([]) } markerLayer = new window.TMap.MultiMarker({ map: map.value, styles: { // 点标记样式 marker: new window.TMap.MarkerStyle({ width: 20, // 样式宽 height: 30, // 样式高 anchor: { x: 10, y: 30 }, // 描点位置 src: ' mapapi.qq /web/lbs/javascriptGL/demo/img/markerDefault.png' // 标记路径 }) } }) map.value.setCenter(new window.TMap.LatLng(shopInfo.lat, shopInfo.lng)) markerLayer.updateGeometries({ id: shopInfo.lat, position: new window.TMap.LatLng(shopInfo.lat, shopInfo.lng) }) }).catch(function (error) { console.log(error) }) } const getAddressKeyword = () => { handleSelect(addressKeyword.value) } const emit = defineEmits(['map-confirm', 'cancel']) /*** * 确认 */ const confirm = () => { let data = JSON.parse(JSON.stringify(shopInfo)) emit('map-confirm', data) } /*** * 取消 */ const cancel = () => { emit('cancel') } </script> <style lang="scss" scoped> .serachinput { width: 300px; box-sizing: border-box; padding: 9px; border: 1px solid #dddee1; line-height: 20px; font-size: 16px; height: 38px; color: #333; position: relative; border-radius: 4px; -webkit-box-shadow: #666 0px 0px 10px; -moz-box-shadow: #666 0px 0px 10px; box-shadow: #666 0px 0px 10px; } :deep(.el-dialog__header) { border-bottom: 0 !important; } </style>