uni-app addMarkers

### 如何在 Uni-app 中使用 `addMarkers` 添加标记

在 Uni-app 的开发环境中，为了向地图组件动态添加标记点，可以利用 `addMarkers` 方法。此方法允许开发者通过 JavaScript 动态更新地图上的标记。

#### 初始化 Markers 数组
确保在初始化阶段清除旧有的 markers 数据，防止重复加载造成不必要的错误[^2]:

export default {
  data() {
    return {
      markers: []
    };
  },
  mounted() {
    this.markers = []; // 清除之前的 marker 数据
    // 加载新的 markers...
  }
}

#### 使用 `addMarkers` 方法
当需要向地图上增加新标记时，可以通过调用 `this.mapContext.addMarkers()` 来完成操作。下面是一个完整的例子来说明如何实现这一点：

<template>
  <view class="container">
    <!-- 地图组件 -->
    <map id="myMap" :markers="markers"></map>

    <!-- 按钮用于触发添加标记 -->
    <button @click="handleAddMarker">添加标记</button>
  </view>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: "MapView",
  data() {
    return {
      mapContext: null,
      markers: [],
    };
  },
  methods: {
    handleAddMarker() {
      const newMarker = [
        {
          iconPath: "/static/location.png", // 自定义图标路径
          latitude: 39.9087,                // 经纬度设置
          longitude: 116.3975,
          width: 30,                        // 图标尺寸
          height: 30,
          callout: {                       // 提示框配置
            content: "这是一个测试地点",
            color: "#FFFFFF",
            fontSize: 14,
            padding: 5,
            bgColor: "#00BFFF",
            borderRadius: 5,
            display: "ALWAYS"
          }
        }
      ];
      
      if (!this.mapContext) {
        this.mapContext = uni.createMapContext('myMap');
      }

      this.mapContext.addMarkers({           // 调用 addMarkers 函数
        markers: newMarker                  // 将准备好的数据传递给它
      });
      
      // 更新本地存储的 markers 列表以便后续处理或其他交互逻辑
      this.markers.push(...newMarker);
    }
  }
});
</script>

这段代码展示了如何创建一个新的 Vue 组件，在其中包含了 `<map>` 和一个按钮。点击按钮会执行 `handleAddMarker` 方法，该方法负责构建并添加一个新的标记到地图上去[^1]。