vue在高德地图的遍历数据标上图标

在Vue中使用高德地图遍历数据并标上图标，可以通过以下步骤实现：

1. 引入高德地图JavaScript API和相关组件：

<!-- 引入高德地图JavaScript API -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的密钥"></script>

<!-- 引入高德地图Marker组件 -->
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>
<link href="https://webapi.amap.com/ui/1.1/ui/misc/Marker.css" rel="stylesheet" />

2. 在Vue组件中创建地图容器：

<template>
  <div class="map-container">
    <div id="map"></div>
  </div>
</template>

<style>
  .map-container {
    width: 100%;
    height: 400px;
  }
</style>

3. 在Vue组件中定义遍历数据的方法，并在mounted生命周期中调用该方法：

<script>
export default {
  mounted() {
    this.renderMarkers();
  },
  methods: {
    async renderMarkers() {
      // 获取数据
      const data = await this.getData();

      // 创建地图对象
      const map = new AMap.Map('map', {
        center: [116.397428, 39.90923],
        zoom: 13
      });

      // 遍历数据，创建标记
      data.forEach(item => {
        const marker = new AMap.Marker({
          position: [item.lng, item.lat],
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          map: map
        });
      });
    },
    async getData() {
      // 获取数据的异步请求
      // ...
    }
  }
};
</script>

在上述代码中，我们先通过异步请求获取数据，然后在renderMarkers方法中遍历数据，创建标记。每个标记使用AMap.Marker创建，设置标记的位置、图标和地图对象，最后添加到地图上即可。

以上是在Vue中使用高德地图遍历数据并标上图标的基本实现方法，可以根据实际需求进行调整和扩展。