vue3+ts使用腾讯地图

1.在index.html中引入

  <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你的key"></script>

2.在vue文件中写入

<script setup lang="ts">
import { ref, onMounted } from 'vue'
let loc = ref({
    lat: 31.1,
    lng: 121.54,
    address: ''
})
// 组件挂载后，渲染对应组件
onMounted(() => {
    const TMap = (window as any).TMap;

    var center = new TMap.LatLng(loc.value.lat, loc.value.lng);//设置中心点坐标
    //初始化地图
    var map = new TMap.Map("container", {
        center: center,//设置地图中心点坐标
        zoom: 17.2,   //设置地图缩放级别
        pitch: 43.5,  //设置俯仰角
        rotation: 45,    //设置地图旋转角度
    });
    // 点标记
    new TMap.MultiMarker({
        map: map,
        //样式定义
        styles: {
            //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
            "myStyle": new TMap.MarkerStyle({
                "width": 25,  // 点标记样式宽度（像素）
                "height": 25, // 点标记样式高度（像素）
                // "src": '.../images/dw.png',  //图片路径
                //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                "anchor": { x: 16, y: 32 }
            })
        },
        //点标记数据数组
        geometries: [{
            "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            "styleId": 'myStyle',  //指定样式id
            "position": new TMap.LatLng(31.1, 121.54),  //点标记坐标位置
            "properties": {//自定义属性
                "title": "marker1"
            }
        }
        ]
    });
    //绑定点击事件
    map.on("click", function (evt: any) {
        console.log('event is ', evt)
        var lat = evt.latLng.getLat().toFixed(6);
        var lng = evt.latLng.getLng().toFixed(6);
        loc.value.lat = lat
        loc.value.lng = lng
    })
})