vue3组合式编写 uni-app 腾讯地图标记点和轨迹的按钮控制

Vue3中的组合式API在uni-app开发腾讯地图应用时，可以利用模板、script和style的结合，简化组件编写，特别是对于地图上标记点和轨迹的控制。首先，你需要安装相关的腾讯地图SDK库，并导入到项目中。

1. **组件结构**:

<template>
  <view class="map-container">
    <t-cmap :ref="mapRef" @ready="onMapReady"></t-cmap>
    <button @click="toggleMarkers">显示/隐藏标记</button>
    <button @click="toggleTraces">显示/隐藏轨迹</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import TcMap, { Marker, Polyline } from '@UniApp/TencentMap';

const mapRef = ref(null);
let markers = [];
let traces = [];

async function onMapReady() {
  // 初始化地图...
}

function toggleMarkers() {
  if (markers.length > 0) {
    for (let marker of markers) {
      marker.setDisplay(false);
    }
  } else {
    for (let position in positions) {
      const newMarker = await mapRef.value.addMarker({
        position,
        title: `位置${position}`,
        display: true,
      });
      markers.push(newMarker);
    }
  }
}

function toggleTraces() {
  if (traces.length > 0) {
    for (let trace of traces) {
      trace.setVisible(false);
    }
  } else {
    // 添加轨迹数据...
  }
}
</script>
<style scoped>
.map-container {
  height: 400px;
  width: 100%;
}
</style>

在这个例子中，`t-cmap` 是腾讯地图组件的引用，`@ready` 事件监听地图加载完成，然后你可以创建标记点和轨迹实例。`toggleMarkers` 和 `toggleTraces` 函数分别用于切换显示或隐藏已添加的标记点和轨迹。