vue3scriptsetuplang=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: 'mapapi.qq/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, // 标注点⽂本
},
],
})
<('click', evt => {
const evtModel = {
lat: Lat().toFixed(6),
lng: Lng().toFixed(6),
}
emit('update', evtModel)
markerLayer.updateGeometries({
id: 'shop',
position: evt.latLng,
styleId: 'small',
content: shopName.value,
})
})
<('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 = ateElement('script')
mapScript.src = 'map.qq/api/gljs?p&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
document.body.appendChild(mapScript)
//加载完成后初始化地图
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)
}