增加公司分类

src/components/MapComponent/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div id="mapContainer" style="width: 100%; height: 100%;"></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.addLayer(new T.TileLayer());
+
+      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>