vue 天地图添加航标

Vue.js 和天地图（Tangram）结合可以创建交互式地图应用，包括添加航标（Marker）。要在 Vue 中添加航标，你需要遵循以下步骤：

1. **安装依赖**:
首先确保已安装 Vue 及其 CLI，然后安装天地图相关的库，如 `vue-tangram` 或 `@tangrams/vue`。

npm install vue-tangram @tangrams/api --save

2. **设置组件**:
创建一个新的 Vue 组件，并引入天地图所需的 API。例如，创建一个名为 `MapMarker.vue` 的文件:

<template>
  <div ref="map" :style="{ width: '100%', height: '500px' }"></div>
</template>

<script>
import { Map, Marker } from '@tangrams/api';

export default {
  data() {
    return {
      map: null,
      position: [39.9138, 116.407], // 北京经纬度示例
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new Map(this.$refs.map, {
        center: this.position,
        zoom: 13, // 初始缩放级别
      });

      // 添加航标
      const marker = new Marker({
        latitude: this.position,
        longitude: this.position,
        anchor: ['bottom', 'center'],
      });
      map.addLayer(marker);
      this.map = map;
    },
  },
};
</script>

3. **在父组件中使用**:
将这个组件引入到需要显示地图的地方，并传递经纬度数据。

<template>
  <div>
    <MapMarker :position="地标位置" />
  </div>
</template>

<script>
import MapMarker from './MapMarker.vue';

export default {
  components: {
    MapMarker,
  },
  data() {
    return {
      地标位置: [39.9138, 116.407], // 替换为你想要添加航标的实际经纬度
    };
  },
};
</script>