vue3加ts应用腾讯地图的demo

<template>
  <div id="container" class="map-container"></div>
</template>
<script setup lang="ts">
import { onMounted, onBeforeUnmount } from "vue";
import mark from "@/assets/svg/mark.svg";
let map: any;
onMounted(() => {
  const TMap = (window as any).TMap; // TMap地图实例
  const LatLng = TMap.LatLng; // 用于创建经纬度坐标实例
  const center = new LatLng(39.980619,116.321277); //设置中心点坐标
  //初始化地图
  map = new TMap.Map("container", {
    center: center,
    zoom:14	//缩放级别
  });
  // 从地图容器移出默认控件,
  map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM); // 从地图容器移出 缩放控件,
  map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE); // 从地图容器移出 比例尺控件,
  map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); // 从地图容器移出 旋转控件,

  //创建并初始化MultiMarker:表示地图上的多个标注点，可自定义标注的图标。,
  new TMap.MultiMarker({
    map: map, //指定地图容器
    //样式定义
    styles: {
      //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
      myStyle: new TMap.MarkerStyle({
        width: 40, // 点标记样式宽度（像素）
        height: 40, // 点标记样式高度（像素）
        // src: mark, //图片路径
        anchor: { x: 20, y: 10 }, // 圆形点以圆心位置为焦点
      }),
    },
    //点标记数据数组
    geometries: [
      {
        id: "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        styleId: "myStyle", //指定样式id
        position: new LatLng(39.908802, 116.397502), //点标记坐标位置
        // properties: {
        //   //自定义属性
        //   title: 'marker1',
        // },
      },
    ],
  });

  //创建InfoWindow实例，并进行初始化
  var infowindow = new TMap.InfoWindow({
    map: map, //指定地图容器
    position: new LatLng(39.908802, 116.397502), //显示信息窗口的坐标
    enableCustom: true, //信息窗体样式是否为自定义，默认为false。
    offset: { y: 0, x: 0 },
    content: `
      <div  class="info-card">腾讯北京总部大楼</div>
    `,
  });
});
// 发现把这个生命周期钩子写在onMounted生命周期钩子内，没有报错，而且还有效果
onBeforeUnmount(() => {
  // 切换路由的时候可能创建了多个实例，可以使用destroy销毁地图
  map.destroy();
});
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 90vh;
  border-radius: 16px;
  :deep(.info-card) {
    position: relative;
    padding: 15px 25px;
    background-color: #fff;
    border-radius: 30px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 22px;
    color: #19193e;
    &::after {
      content: "";
      border-width: 15px;
      position: absolute;
      left: 50%;
      bottom: -50%;
      transform: translateX(-50%);
      border-style: solid dashed dashed;
      border-color: #fff transparent transparent transparent;
    }
  }
}
</style>