vue3 script setup lang="ts" 腾讯地图子组件简单写法

先附上子组件的代码（引入的地图js文件key是官方示例中给的key，实际开发需要换成自己的）：

<template>
    <div>
        <van-button type="success">获取定位</van-button>
        若发现位置不准可放大地图进行点击切换位置操作
    </div>
    <div id="TxMap"></div>
</template>

<script setup lang="ts">
import { onMounted, toRefs, ref, watch } from 'vue'
import { Toast } from 'vant'

const props = defineProps({
    lat: Number,
    lng: Number,
    shopName: String
})
const emit = defineEmits([
    'update',
])
const { lat, lng, shopName } = toRefs(props)

let mapFn
const initMap = () => {
    // 定义地图中心点坐标
    let center = new window.TMap.LatLng(lat.value, lng.value)
    // 定义map变量，调用 TMap.Map() 构造函数创建地图
    mapFn = new window.TMap.Map('TxMap', {
        center: center, // 设置地图中心点坐标
        zoom: 17, // 设置地图缩放级别
        viewMode: '2D', // 设置2D模式
        showControl: true, // 去掉控件
    })
    let markerLayer = new window.TMap.MultiMarker({
        id: 'marker-layer',
        map: mapFn, // 显示Marker图层的底图
        styles: {
            small: new window.TMap.MarkerStyle({
                // 点标注的相关样式
                width: 34, // 宽度
                height: 46, // 高度
                anchor: { x: 17, y: 23 }, // 标注点图片的锚点位置
                src: 'https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/small.png', // 标注点图片url或base64地址
                color: '#B45F04', // 标注点文本颜色
                size: 20, // 标注点文本文字大小
                direction: 'top', // 标注点文本文字相对于标注点图片的方位
                offset: { x: 0, y: 0 }, // 标注点文本文字基于direction方位的偏移属性
                strokeColor: '#fff', // 标注点文本描边颜色
                strokeWidth: 2, // 标注点文本描边宽度
            }),
        },
        geometries: [
            {
                id: 'shop',
                styleId: 'small', // 对应中的样式id
                position: center, // 标注点位置
                content: shopName.value, // 标注点文本
            },
        ],
    })
    mapFn.on('click', evt => {
        const evtModel = {
            lat: evt.latLng.getLat().toFixed(6),
            lng: evt.latLng.getLng().toFixed(6),
        }
        emit('update', evtModel)
        markerLayer.updateGeometries({
            id: 'shop',
            position: evt.latLng,
            styleId: 'small',
            content: shopName.value,
        })
    })
    mapFn.on('idle', () => {
        watch(() => shopName.value, (newVal, oldVal) => {
            markerLayer.updateGeometries({
                id: 'shop',
                position: new window.TMap.LatLng(lat.value, lng.value),
                styleId: 'small',
                content: shopName.value,
            })
        })
    })
}
const count = ref(123456)
defineExpose({
    count
})

onMounted(() => {
    const mapScript = document.createElement('script')
    mapScript.type = 'text/javascript'
    mapScript.src = 'https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
    document.body.appendChild(mapScript)
    mapScript.onload = () => {
        //加载完成后初始化地图
        initMap()
    }
})
</script>

<style lang="less" scoped>
#TxMap {
    width: 100%;
    height: 100vw;
}
</style>

父组件页面引入：

import TxMap from '../../components/txmap/index.vue'

<template>
    <TxMap ref="hello" :lat="storeModel.Latitude" :lng="storeModel.Longitude" :shop-name="storeModel.Name" @update="updateMap" />
</template>

绑定经纬度和显示内容即可，通过点击地图从子组件获取的经纬度emit给父组件双向绑定

const updateMap = (evtModel: object) => {
    storeModel.Latitude = parseFloat(evtModel.lat)
    storeModel.Longitude = parseFloat(evtModel.lng)
}