web/src/components/common/qq-map/index.vue

<template>
  <t-dialog
    :visible="visible"
    :header="`打卡地址`"
    :width="1200"
    :closeOnOverlayClick="false"
    @close="emit('close', false)"
    :footer="false"
  >
    <div class="map-container" ref="mapContainer"></div>
  </t-dialog>
</template>
<script setup name="QqMap">
import { ref, onMounted } from 'vue';
const props = defineProps({ longitude: Number, latitude: Number });
const emit = defineEmits(['close']);
const mapContainer = ref();
const visible = ref(true);
const myMap = ref(null);
const markerLayer = ref(null);
onMounted(() => {
  let center = new window.TMap.LatLng(props.latitude, props.longitude);
  myMap.value = new window.TMap.Map(mapContainer.value, {
    center: center, //设置地图中心点坐标
    zoom: 17.2, //设置地图缩放级别
    pitch: 43.5, //设置俯仰角
    rotation: 45, //设置地图旋转角度
  });
  markerLayer.value = new window.TMap.MultiMarker({
    map: myMap.value, //指定地图容器
    //样式定义
    styles: {
      //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
      myStyle: new window.TMap.MarkerStyle({
        width: 25, // 点标记样式宽度（像素）
        height: 35, // 点标记样式高度（像素）
        // src: '../img/marker.png', //图片路径
        //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
        anchor: { x: 16, y: 32 },
      }),
    },
    //点标记数据数组
    geometries: [
      {
        id: '1', //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        styleId: 'myStyle', //指定样式id
        position: new window.TMap.LatLng(props.latitude, props.longitude), //点标记坐标位置
        properties: {
          //自定义属性
          title: 'marker1',
        },
      },
    ],
  });
});
</script>
<style lang="less" scoped>
.map-container {
  width: 100%;
  height: calc(100vh - 150px);
}
</style>