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: 'https://mapapi.qq.com/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: 'https://mapapi.qq.com/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) => {
    // 腾讯地图文档： https://lbs.qq.com/faq/serverFaq/webServiceKey
    // csdn参考：https://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('https://apis.map.qq.com/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: 'https://mapapi.qq.com/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>