<template>
  <div id="mapContainer" style="width: 100%; height: 100%;background-color:rgba(0,211,0,0.6)"></div>
</template>

<script>
export default {
  name: 'MapComponent',
  mounted() {
    // 等待天地图脚本加载完成
    this.initializeMap();
  },
  methods: {
    initializeMap() {

      // 创建地图对象
      const map = new T.Map('mapContainer');

      // 设置地图中心点和缩放级别
      map.centerAndZoom(new T.LngLat(116.404, 39.915), 12);
      map.setStyle("indigo")
      // 添加图层（例如：底图层）
      // map.addLayer(new T.TileLayer());

      const options = new T.Control.OverviewMapOptions();
      options.anchor = "T_ANCHOR_TOP_RIGHT";
      options.size = new T.Point(100, 100)
      options.isOpen = true;

      let a = T.Control.OverviewMap(options)
      map.addControl(a);
      let points = [];
      points.push(new T.LngLat(116.41136, 39.97569));
      points.push(new T.LngLat(116.411794, 39.9068));
      points.push(new T.LngLat(116.32969, 39.92940));
      points.push(new T.LngLat(116.385438, 39.90610));
      var line = new T.Polyline(points);
      line.addEventListener('mouseover', this.handleMouseOver);
      line.addEventListener('mouseout', this.handleMouseOut);
      //向地图上添加线
      map.addOverLay(line);

    },
    handleMouseOver(event) {
      const polyline = event.target;
      polyline.setColor("red"); // 鼠标悬停时颜色变为绿色
    },
    handleMouseOut(event) {
      const polyline = event.target;
      polyline.setColor("green"); // 鼠标悬停时颜色变为绿色
    }
  }
};
</script>

<style>
/* 这里可以添加样式以确保地图容器的大小 */
</style>
