diff --git a/frontend/front/public/index.html b/frontend/front/public/index.html
index de8b149..27cbdbe 100644
--- a/frontend/front/public/index.html
+++ b/frontend/front/public/index.html
@@ -18,6 +18,7 @@
     <script src="<%= BASE_URL %>ddLogin.js"></script>
     <script src="<%= BASE_URL %>LarkSSOSDKWebQRCode-1.0.1.js"></script>
     <link rel="stylesheet" href="<%= BASE_URL %>static/css/loading.css" />
+    <script src="https://api.tianditu.gov.cn/api?v=4.0&tk=73fb326ebb6c50729baaef65cea858c4"></script>
     <script type="text/javascript">
       window._AMapSecurityConfig = {
           securityJsCode:'0b63a538e25f626fbfd6dbfe5bb2808a',
diff --git a/frontend/front/src/views/pages/carMap/index.vue b/frontend/front/src/views/pages/carMap/index.vue
index 4e07c78..a8e919a 100644
--- a/frontend/front/src/views/pages/carMap/index.vue
+++ b/frontend/front/src/views/pages/carMap/index.vue
@@ -2,7 +2,7 @@
   <div class="container">
     <div class="searchSty">
       <el-form :inline="true" style="display: flex; justify-content: space-between" :model="queryForm"
-               class="demo-form-inline">
+        class="demo-form-inline">
         <!--        <el-form-item label="气站名称:">-->
         <!--          <el-input v-model="queryForm.orgname" clearable placeholder="请输入气站名称"></el-input>-->
         <!--        </el-form-item>-->
@@ -22,54 +22,49 @@
         </div>
         <el-form-item>
           <el-button type="primary" icon="el-icon-refresh"
-                     style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
-                     @click="handleReset" plain>重置
+            style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
+            @click="handleReset" plain>重置
           </el-button>
           <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
-                     icon="el-icon-search" @click="handleSearch"> 查询
+            icon="el-icon-search" @click="handleSearch"> 查询
           </el-button>
         </el-form-item>
       </el-form>
     </div>
-    <div class="mapSty">
-      <div id="mapContainer"
-           class="map"
-           tabindex="0">
+    <div class="mapSty" v-loading="loading">
+      <div id="mapContainer" class="map" tabindex="0">
       </div>
     </div>
-    <div ref="infoData"
-         v-if="infoWindowVisible"
-         class="custom-info input-card content-window-card">
+    <div ref="infoData" v-show="infoWindowVisible" class="custom-info input-card content-window-card">
       <div class="info-top" style="display: flex; justify-content: space-between;align-items: center">
         <div>
           <span style="color: #ffffff;">车辆信息</span>
         </div>
         <div @click="closeInfoWindow" style="display: flex;align-items: center">
-          <i class="el-icon-close" style="color: #ffffff; font-size: 20px;cursor: pointer; " ></i>
+          <i class="el-icon-close" style="color: #ffffff; font-size: 20px;cursor: pointer; "></i>
         </div>
       </div>
-      <div class="info-middle"
-           style="background-color: white;">
+      <div class="info-middle" style="background-color: white;">
         <el-row>
-          <el-col :span="24" v-for="(item,index) in devInfoList1" :key="'dev'+index" >
-            <el-col :span="12" v-for="(bitem,index) in item" :key="bitem.name">
+          <el-col :span="24" v-for="(item, index) in devInfoList1" :key="'dev' + index">
+            <el-col :span="12" v-for="(bitem, index) in item" :key="bitem.name">
               <div class="info-div" style="display: flex">
                 <div style="text-align: right;width: 168px;">
-                  {{bitem.name}}：
+                  {{ bitem.name }}：
                 </div>
-                <div class="info-span" style="flex: 1">{{bitem.value}}</div>
+                <div class="info-span" style="flex: 1">{{ bitem.value }}</div>
               </div>
             </el-col>
           </el-col>
         </el-row>
       </div>
-      <div class="info-bottom"
-           style="position: relative; top: 0px; margin: 0px auto;"><img src="https://webapi.amap.com/images/sharp.png"></div>
+      <div class="info-bottom" style="position: relative; top: 0px; margin: 0px auto;"><img
+          src="https://webapi.amap.com/images/sharp.png"></div>
     </div>
   </div>
 </template>
 <script>
-import { getAppTagTypes,getMapPointDetailInfo } from '@/api/gasMap.js'
+import { getAppTagTypes, getMapPointDetailInfo } from '@/api/gasMap.js'
 import { getCurrentEnterpriseAndStation } from '@/api/common.js'
 import AMapLoader from '@amap/amap-jsapi-loader';
 import iconImg from '@/assets/qpxx/car.png'
@@ -82,147 +77,150 @@ export default {
   name: "index",
   data() {
     return {
-      rightImgUrl:rightImg,
-      dailyRecordImgUrl:dailyRecordImg,
+      rightImgUrl: rightImg,
+      dailyRecordImgUrl: dailyRecordImg,
       queryForm: {
         qzId: "",  //气站id
         qyId: "" //企业id
       },
       qyOption: [],
-      allOption:[],
+      allOption: [],
       qzOption: [],
-      reference:{},
+      reference: {},
       // 控制渲染条件 如果不用v-if会报错 具体可自行尝试
       showPop: false,
       // 保存当前激活的refrence id
-      activeId:'',
-      devInfoList1:[],
+      activeId: '',
+      devInfoList1: [],
       devInfoList: [
         {
           name: '车票号',
           value: '鄂A·A1217',
-          key:'fSsqymc'
+          key: 'fSsqymc'
         },
         {
           name: '车辆型号',
           value: 'LN56516485656',
-          key:'fSsczmc'
+          key: 'fSsczmc'
         },
         {
           name: '所属气站',
           value: '孝汉川市刘家隔镇液化石油气瓶',
-          key:'fQpbh'
+          key: 'fQpbh'
         },
         {
           name: '投入使用日期',
           value: '20223年5月31号',
-          key:'fZzrq'
+          key: 'fZzrq'
         },
         {
           name: '驾驶员',
-          value:'张三',
-          key:'qpzt',
+          value: '张三',
+          key: 'qpzt',
         },
         {
           name: '联系电话',
           value: '1810000081',
-          key:'qpzl'
+          key: 'qpzl'
         },
         {
           name: '证件编号',
-          value:'- -',
-          key:'fQpgg',
+          value: '- -',
+          key: 'fQpgg',
         },
         {
           name: '证件编号有效期',
           value: '- -',
-          key:'ccbh'
+          key: 'ccbh'
         },
         {
           name: '身份证号',
-          value:'- -',
-          key:'zybh'
+          value: '- -',
+          key: 'zybh'
         },
         {
           name: '车辆照片',
           value: '- -',
-          key:'jyhbh'
+          key: 'jyhbh'
         },
         {
           name: '委托运输公司',
-          key:'bcjyrq',
-          value:'- -'
+          key: 'bcjyrq',
+          value: '- -'
         },
         {
           name: '道路运输许可证',
-          value:'- -',
-          key:'fXcjysj',
+          value: '- -',
+          key: 'fXcjysj',
         },
         {
           name: '道路运输许可证有效日期',
           value: '- -',
-          key:'sjsynx'
+          key: 'sjsynx'
         },
         {
           name: '危化品证号',
-          key:'sccj',
-          value:'- -'
+          key: 'sccj',
+          value: '- -'
         },
         {
           name: '危化品证有效日期',
           value: '- -',
-          key:'jzrq'
+          key: 'jzrq'
         },
         {
           name: '创建时间',
-          key:'jdrq',
-          value:'2021年7月4号'
+          key: 'jdrq',
+          value: '2021年7月4号'
         }
       ],
-      markers:[],
-      clickMapId:'',
-      infoWindowVisible:false,
+      marker: null,
+      markers: [],
+      clickMapId: '',
+      infoWindowVisible: false,
       map: null, //地图
       pointData: [],
-      nodeList:[],
-      centerPoint:[114.347441, 30.50438],
+      nodeList: [],
+      centerPoint: [114.347441, 30.50438],
+      loading: false,
     }
   },
   mounted() {
+    // this.initMap();
   },
-  created () {
+  created() {
     this.initData();
   },
   methods: {
-    initData(){
+    initData() {
       this.getEnterpriseAndStationList();
       this.getMarkPoint();
     },
     //获取企业和气站数据
-    async getEnterpriseAndStationList(){
-      await getCurrentEnterpriseAndStation().then((res)=>{
-        console.log('打印当前气站和企业信息数据====',res);
+    async getEnterpriseAndStationList() {
+      await getCurrentEnterpriseAndStation().then((res) => {
+        console.log('打印当前气站和企业信息数据====', res);
         const { value } = res;
-        if(value.length>0){
+        if (value.length > 0) {
           this.allOption = value;
-          this.qyOption = value?value.map((item)=>{
+          this.qyOption = value ? value.map((item) => {
             return {
-              qyId:item.qyId,
-              qymc:item.qymc
+              qyId: item.qyId,
+              qymc: item.qymc
             }
-          }):[];
+          }) : [];
         }
       })
     },
     //选择企业的数据
-    handleQyChange(val){
-      this.qzOption =[];
-      this.queryForm.qzId ='';
-      this.qzOption = this.allOption.filter((item)=>item.qyId == val)[0].qzxxList;
+    handleQyChange(val) {
+      this.qzOption = [];
+      this.queryForm.qzId = '';
+      this.qzOption = this.allOption.filter((item) => item.qyId == val)[0].qzxxList;
     },
     //点击气瓶节点的功能
-    handleNodeItem(val){
-      console.log('打印val',val)
+    handleNodeItem(val) {
+      console.log('打印val', val)
       // // 这个操作是为了避免与源码中的点击reference doToggle方法冲突
       // if (this.activeId === val.id && this.showPop) return
       // this.showPop = false;
@@ -242,7 +240,9 @@ export default {
     },
     //查询按钮
     handleSearch() {
+      this.loading = true;
       this.pointData = [];
+      this.markers = [];
       this.infoWindowVisible = false;
       this.getMarkPoint();
     },
@@ -253,38 +253,43 @@ export default {
       this.queryForm.qyId = '';
       this.handleSearch();
     },
-    async  getMarkPoint(){
-      let params ={
-        qzId:this.queryForm.qzId,
+    async getMarkPoint() {
+      this.loading = true;
+      let params = {
+        qzId: this.queryForm.qzId,
         qyId: this.queryForm.qyId,
       }
-      await getAppTagTypes(params).then((res)=>{
-        let { code, value} = res;
-        if(code == 200){
-          value.map((item,index)=>{
-            if(item.typeone.length>0){
-              item.typeone.map((itemone)=>{
+      await getAppTagTypes(params).then((res) => {
+        let { code, value } = res;
+        if(!value.length){
+         this.loading = false;
+         return 
+        }
+        if (code == 200) {
+          value.map((item, index) => {
+            if (item.typeone.length > 0) {
+              item.typeone.map((itemone) => {
                 this.pointData.push({
                   ...itemone,
-                  type:'one',
+                  type: 'one',
                 });
               })
             }
-            if(item.typetwo.length>0){
-              item.typetwo.map((itemtwo)=>{
+            if (item.typetwo.length > 0) {
+              item.typetwo.map((itemtwo) => {
                 this.pointData.push({
                   ...itemtwo,
-                  type:'two'
+                  type: 'two'
                 });
               })
             }
-            if(item.typethree.length>0){
+            if (item.typethree.length > 0) {
               console.log('打印111')
-              item.typethree.map((itemthree)=>{
+              item.typethree.map((itemthree) => {
                 // this.pointData.push(itemthree);
                 this.pointData.push({
                   ...itemthree,
-                  type:'three'
+                  type: 'three'
                 });
               })
             }
@@ -293,10 +298,10 @@ export default {
           this.pointData = this.pointData.map(item => {
             return {
               ...item,
-              isActive :false,
+              isActive: false,
             }
           });
-          this.centerPoint = [this.pointData[0].fjd,this.pointData[0].fwd]
+          this.centerPoint = [this.pointData[0].fjd, this.pointData[0].fwd]
           this.initMap();
         }
       })
@@ -316,43 +321,93 @@ export default {
           version: '2.0' //数据可视化
         }
       }).then((AMap) => {
-        this.map = new AMap.Map('mapContainer', {//设置地图容器id
-          viewMode: '2D', //是否为3D地图模式
-          zoom: 16, //初始化地图层级
-          center: this.centerPoint,//初始化地图中心点
-        });
-        //信息窗口实例
-        //循环所有的标记点
-        console.log('打印pointData',this.pointData);
-        let arr =[];
-        for (let i = 0; i < this.pointData.length; i++) {
-          const num = i + 1;
-          const contentImg = '<div style="color: #fff; width: 50px;height: 50px;"><img src="./src/assets/images/后台.png" />'+num + "</div>"
-          // 引入本地图片
-          const localIcon = new AMap.Icon({
-            size: new AMap.Size(30, 34), // 图标尺寸
-            image: iconImg, // 图片的URL
-            imageSize: new AMap.Size(30, 34), // 图标所用图片大小
-          });
-          var marker = new AMap.Marker({
-            position: [this.pointData[i].fjd, this.pointData[i].fwd],
-            map: this.map,
-            icon:localIcon,
-            offset: new AMap.Pixel(-15, -20),
+        // this.map = new AMap.Map('mapContainer', {//设置地图容器id
+        //   viewMode: '2D', //是否为3D地图模式
+        //   zoom: 16, //初始化地图层级
+        //   center: this.centerPoint,//初始化地图中心点
+        // });
+
+        // ===========天地图代码==============
+        if(!this.map){
+          // 防止二次初始化导致拖拽失效
+          this.map = new T.Map('mapContainer',{
+            projection: 'EPSG:900913' 
           });
-          arr.push( Object.assign(this.pointData[i], {
-            mapId: marker._amap_id,
-          }))
-          // 将创建的点标记添加到已有的地图实例+
+        }
+        this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 16);
+        //允许鼠标双击放大地图
+        this.map.enableScrollWheelZoom();
+        let arr = [];
+        const seenCoordinates = new Set(); // 记录已经处理的经纬度
+
+        for (let i = 0; i < this.pointData.length; i++) {
+          const point = this.pointData[i];
+          const coordsKey = `${point.fjd},${point.fwd}`; // 使用经纬度创建唯一的键
+          // 如果经纬度之前未处理过，则添加到数组和地图
+
+            // 创建本地图标
+            const localIcon = new T.Icon({
+              iconUrl: iconImg,
+              iconSize: new T.Point(30, 34),
+              iconAnchor: new T.Point(30, 34),
+            });
+
+            // 创建自定义标记
+          const marker = new T.Marker(new T.LngLat(point.fjd, point.fwd), { icon: localIcon });
+          arr.push(Object.assign(point, { mapId: point.id }));
           marker['arr'] = arr;
-          marker['isActive'] = this.pointData[i].isActive;
-          // console.log('marker=====', marker);
-          this.map.add([marker]);
-          // marker.content = '我是第' + (i + 1) + '个Marker';
-          marker.on("click", this.markerClick);
+          marker['isActive'] = point.isActive;
+          marker['type'] = point.type;
+          marker['tid'] = point.id;
           this.markers.push(marker);
-          marker.emit('click', {target: marker});
+          if (!seenCoordinates.has(coordsKey)) {
+            seenCoordinates.add(coordsKey);
+            // 绑定点击事件
+            marker.addEventListener("click", this.markerClick.bind(null, marker));
+            // 将标记添加到地图
+            this.map.addOverLay(marker);
+          }
         }
+        // 创建并添加标记集群
+        new T.MarkerClusterer(this.map, { markers: this.markers });
+        // 更新加载状态
+        this.loading = false;
+        // ===========天地图代码==============
+
+
+        //信息窗口实例
+        //循环所有的标记点
+        console.log('打印pointData', this.pointData);
+        // let arr =[];
+        // for (let i = 0; i < this.pointData.length; i++) {
+        //   const num = i + 1;
+        //   const contentImg = '<div style="color: #fff; width: 50px;height: 50px;"><img src="./src/assets/images/后台.png" />'+num + "</div>"
+        //   // 引入本地图片
+        //   const localIcon = new AMap.Icon({
+        //     size: new AMap.Size(30, 34), // 图标尺寸
+        //     image: iconImg, // 图片的URL
+        //     imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+        //   });
+        //   var marker = new AMap.Marker({
+        //     position: [this.pointData[i].fjd, this.pointData[i].fwd],
+        //     map: this.map,
+        //     icon:localIcon,
+        //     offset: new AMap.Pixel(-15, -20),
+        //   });
+        //   arr.push( Object.assign(this.pointData[i], {
+        //     mapId: marker._amap_id,
+        //   }))
+        //   // 将创建的点标记添加到已有的地图实例+
+        //   marker['arr'] = arr;
+        //   marker['isActive'] = this.pointData[i].isActive;
+        //   // console.log('marker=====', marker);
+        //   this.map.add([marker]);
+        //   // marker.content = '我是第' + (i + 1) + '个Marker';
+        //   marker.on("click", this.markerClick);
+        //   this.markers.push(marker);
+        //   marker.emit('click', {target: marker});
+        // }
+        return
         AMap.plugin('AMap.DistrictSearch', function () {
           //创建行政区查询对象
           var options = {
@@ -391,61 +446,106 @@ export default {
       });
     },
     //点击点标记事件
-    markerClick(e) {
-      this.infoWindowVisible = true;
-      let arrNew = e.target.arr.filter((x) => x.mapId == e.target._amap_id);
+    markerClick(event, e) {
+      console.log(e);
+      let arrNew = e.target.arr.filter((x) => x.mapId == e.target.tid);
       this.devInfo = arrNew && arrNew[0];
       // infoWindow.setContent(e.target.content);
       console.log('打印res', arrNew);
       // 如果已选中，则不做处理
 
       // 引入本地图片
-      const newIcon = new AMap.Icon({
-        size: new AMap.Size(30, 34), // 图标尺寸
-        image: iconImg1, // 图片的URL
-        imageSize: new AMap.Size(30, 34), // 图标所用图片大小
-      });
-      const oldIcon = new AMap.Icon({
-        size: new AMap.Size(30, 34), // 图标尺寸
-        image: iconImg, // 图片的URL
-        imageSize: new AMap.Size(30, 34), // 图标所用图片大小
-      });
+      // const newIcon = new AMap.Icon({
+      //   size: new AMap.Size(30, 34), // 图标尺寸
+      //   image: iconImg1, // 图片的URL
+      //   imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+      // });
+      // const oldIcon = new AMap.Icon({
+      //   size: new AMap.Size(30, 34), // 图标尺寸
+      //   image: iconImg, // 图片的URL
+      //   imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+      // });
+      this.clickMapId = e.target.tid;
       if (!e.target.isActive) {
-        e.target.isActive = true;
-        this.clickMapId = '';
-      } else {
-        e.target.isActive = false;
-        this.getPointDetailInfo(arrNew[0].fqptm,e);
-        this.clickMapId = e.target._amap_id;
+        // 如果已选中，则不做处理
+        this.getPointDetailInfo(arrNew[0].fqptm, e);
+        this.infoWindowVisible = true;
+        let content = this.$refs.infoData;
+        if (!content) return
+        var lnglat = new T.LngLat(e.lnglat.lng, e.lnglat.lat);
+        console.log("content", content);
+        console.log("lnglat", lnglat);
+        var infoWin = new T.InfoWindow();
+        infoWin.setLngLat(lnglat);
+        infoWin.setContent(content);
+        this.map.openInfoWindow(content, lnglat);
+        this.map.panTo(lnglat);
+        // this.map.panTo(lnglat); 
       }
+
+      const newIcon = new T.Icon({
+        iconSize: T.Point(30, 34), // 图标尺寸
+        iconUrl: iconImg1, // 图片的URL
+        iconAnchor: T.Point(30, 34), // 图标所用图片大小
+      });
+      const oldIcon = new T.Icon({
+        iconSize: T.Point(30, 34), // 图标尺寸
+        iconUrl: iconImg, // 图片的URL
+        iconAnchor: T.Point(30, 34), // 图标所用图片大小
+      });
+
       this.markers.forEach((marker) => {
-        if (marker._amap_id !== this.clickMapId) {
-          marker.isActive = true;
+        if (marker.tid !== this.clickMapId) {
+          // marker.isActive = true;
           marker.setIcon(oldIcon);
-        }else{
-          marker.isActive = false;
-          console.log('打印marker',marker);
+        } else {
+          // marker.isActive = false;
+          console.log('打印marker', marker);
           marker.setIcon(newIcon);
         }
       });
+
+
+
+
+
+
+      // if (!e.target.isActive) {
+      //   e.target.isActive = true;
+      //   this.clickMapId = '';
+      // } else {
+      //   e.target.isActive = false;
+      //   this.getPointDetailInfo(arrNew[0].fqptm,e);
+      //   this.clickMapId = e.target._amap_id;
+      // }
+      // this.markers.forEach((marker) => {
+      //   if (marker._amap_id !== this.clickMapId) {
+      //     marker.isActive = true;
+      //     marker.setIcon(oldIcon);
+      //   }else{
+      //     marker.isActive = false;
+      //     console.log('打印marker',marker);
+      //     marker.setIcon(newIcon);
+      //   }
+      // });
       // 更新选中的标记点
       // 设置当前点击的标记点样式
       // e.target.setIcon(newIcon); // 或者其他方法来重置样式
     },
-    async getPointDetailInfo(fqptm,e){
-      let params ={
-        qptm:fqptm
+    async getPointDetailInfo(fqptm, e) {
+      let params = {
+        qptm: fqptm
       }
-      await getMapPointDetailInfo(params).then(async(res)=>{
-        console.log('打印res',res);
-        const { value} = res;
-        const {qpdqlzs,qpOrderInfoVO} = value;
-        var infoWindow = this.createInfoWindow();
-        infoWindow.open(this.map, e.target.getPosition());
+      await getMapPointDetailInfo(params).then(async (res) => {
+        console.log('打印res', res);
+        const { value } = res;
+        const { qpdqlzs, qpOrderInfoVO } = value;
+        // var infoWindow = this.createInfoWindow();
+        // infoWindow.open(this.map, e.target.getPosition());
         // this.devInfoList = await this.$assignValues(value, this.devInfoList);
-        this.nodeList = await this.$createDoubleArray(qpdqlzs,5);
+        this.nodeList = await this.$createDoubleArray(qpdqlzs, 5);
         console.log('打印this.nodeList', this.nodeList);
-        this.devInfoList1  = await this.$createDoubleArray(this.devInfoList,2);
+        this.devInfoList1 = await this.$createDoubleArray(this.devInfoList, 2);
 
       })
     },
@@ -461,19 +561,31 @@ export default {
     },
     closeInfoWindow() {
       // 引入本地图片
-      const oldIcon = new AMap.Icon({
-        size: new AMap.Size(30, 34), // 图标尺寸
-        image: iconImg, // 图片的URL
-        imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+      // const oldIcon = new AMap.Icon({
+      //   size: new AMap.Size(30, 34), // 图标尺寸
+      //   image: iconImg, // 图片的URL
+      //   imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+      // });
+      // this.markers.forEach((marker) => {
+      //   if (marker._amap_id == this.clickMapId) {
+      //     marker.isActive = true;
+      //     marker.setIcon(oldIcon);
+      //   }
+      // });
+      const oldIcon = new T.Icon({
+        iconSize: T.Point(30, 34), // 图标尺寸
+        iconUrl: iconImg, // 图片的URL
+        iconAnchor: T.Point(30, 34), // 图标所用图片大小
       });
       this.markers.forEach((marker) => {
-        if (marker._amap_id == this.clickMapId) {
-          marker.isActive = true;
+        if (marker.tid == this.clickMapId) {
+          // marker.isActive = true;
           marker.setIcon(oldIcon);
         }
       });
       this.clickMapId = '';
-      this.map.clearInfoWindow();
+      // this.map.clearInfoWindow();
+      this.map.closeInfoWindow();
     },
   }
 }
@@ -488,24 +600,48 @@ export default {
   opacity: 0.92;
   color: #fff;
 }
+
 /* 下方是去除三角箭头的代码 */
 .popoverSty.el-popper[x-placement^=top] .popper__arrow::after {
   border-top-color: #ec661e !important;
 }
 </style>
 <style lang="scss" scoped>
+::v-deep .tdt-infowindow-content-wrapper {
+  box-shadow: none;
+  background: rgba(255, 255, 255, 0);
+}
+
+::v-deep .tdt-infowindow-close-button {
+  display: none;
+}
+
+::v-deep .tdt-infowindow-tip-container {
+  display: none;
+}
+
+::v-deep .tdt-infowindow {
+  bottom: 40px !important;
+  left: -360px !important;
+}
+
 #mapContainer {
   min-width: 865px;
   min-height: 630px;
 }
 
 .container {
-  .textSty{
-    white-space: nowrap; /* 设置为单行 */
-    max-width: 200px; /* 设置最大宽度 */
-    overflow: hidden; /* 隐藏超出部分的内容 */
-    text-overflow: ellipsis; /* 显示省略号 */
+  .textSty {
+    white-space: nowrap;
+    /* 设置为单行 */
+    max-width: 200px;
+    /* 设置最大宽度 */
+    overflow: hidden;
+    /* 隐藏超出部分的内容 */
+    text-overflow: ellipsis;
+    /* 显示省略号 */
   }
+
   .searchSty {
     background: #ffffff;
     padding: 0 20px;
@@ -517,25 +653,34 @@ export default {
     margin-top: 20px;
     background: #ffffff;
   }
-  .labelSty{
+
+  .labelSty {
     width: 10px;
     height: 10px;
     border-radius: 2px;
     margin-right: 10px;
   }
-  .completeSty{
+
+  .completeSty {
     background-color: #ea5504;
   }
-  .uncompleteSty{
+
+  .uncompleteSty {
     background-color: #ccd0e5;
   }
-  .textSty{
-    white-space: nowrap; /* 设置为单行 */
-    max-width: 200px; /* 设置最大宽度 */
-    overflow: hidden; /* 隐藏超出部分的内容 */
-    text-overflow: ellipsis; /* 显示省略号 */
+
+  .textSty {
+    white-space: nowrap;
+    /* 设置为单行 */
+    max-width: 200px;
+    /* 设置最大宽度 */
+    overflow: hidden;
+    /* 隐藏超出部分的内容 */
+    text-overflow: ellipsis;
+    /* 显示省略号 */
   }
 }
+
 .content-window-card {
   position: relative;
   box-shadow: none;
@@ -545,6 +690,7 @@ export default {
   width: 45rem;
   padding: 0;
 }
+
 .content-window-card p {
   height: 2rem;
 }
@@ -569,6 +715,7 @@ export default {
   line-height: 31px;
   padding: 0 10px;
 }
+
 .info-top img {
   position: absolute;
   top: 10px;
@@ -593,6 +740,7 @@ export default {
   clear: both;
   text-align: center;
 }
+
 .info-bottom img {
   position: relative;
   z-index: 104;
@@ -628,6 +776,4 @@ export default {
 .info-a-title {
   color: #000000;
   font-size: 16px;
-}
-
-</style>
+}</style>
diff --git a/frontend/front/src/views/pages/enterpriseGasStation/enterpriseGasMap/index.vue b/frontend/front/src/views/pages/enterpriseGasStation/enterpriseGasMap/index.vue
index c0fd474..412fcdc 100644
--- a/frontend/front/src/views/pages/enterpriseGasStation/enterpriseGasMap/index.vue
+++ b/frontend/front/src/views/pages/enterpriseGasStation/enterpriseGasMap/index.vue
@@ -28,7 +28,7 @@
         </el-form-item>
       </el-form>
     </div>
-    <div class="mapSty">
+    <div class="mapSty" v-loading="loading">
       <div id="mapContainer"
            class="map"
            tabindex="0">
@@ -304,6 +304,7 @@ export default {
           key:'czl'
         },
       ],
+      marker:null,
       markers:[],
       clickMapId:'',
       companyInfoDataVisible:false,
@@ -311,6 +312,8 @@ export default {
       map: null, //地图
       pointData: [],
       centerPoint:[114.347441, 30.50438],
+      currentObj:{},
+      loading:false
     }
   },
   mounted() {
@@ -350,7 +353,9 @@ export default {
     },
     //查询按钮
     handleSearch() {
+      this.loading = true;
       this.pointData = [];
+      this.markers = [];
       this.companyInfoDataVisible = false;
       this.gasStationInfoVisible = false;
       this.getMarkPoint();
@@ -362,13 +367,18 @@ export default {
       this.queryForm.qyId = '';
       this.handleSearch();
     },
-    async  getMarkPoint(){
+    async getMarkPoint(){
+      this.loading = true;
       let params ={
         qzId:this.queryForm.qzId,
         qyId: this.queryForm.qyId,
       }
       await getEnterpriseMapPoint(params).then((res)=>{
         let { code, value} = res;
+        if(!value){
+         this.loading = false;
+         return 
+        }
         if(code == 200){
           const { qyxxList, qzxxList } = value;
           let pointDataArray =[]
@@ -394,7 +404,8 @@ export default {
           }):[];
           console.log('打印value====>', pointDataArray);
           this.pointData = pointDataArray;
-          // this.centerPoint=[pointDataArray[0].fJd,pointDataArray[0].fWd]
+          console.log('打印pointData',this.pointData);
+          this.centerPoint=[pointDataArray[0].fJd,pointDataArray[0].fWd]
           this.initMap();
         }
       })
@@ -414,40 +425,82 @@ export default {
           version: '2.0' //数据可视化
         }
       }).then((AMap) => {
-        this.map = new AMap.Map('mapContainer', {//设置地图容器id
-          viewMode: '2D', //是否为3D地图模式
-          zoom: 15, //初始化地图层级
-          center: this.centerPoint,//初始化地图中心点
-        });
-        //信息窗口实例
-        //循环所有的标记点
-        console.log('打印pointData',this.pointData);
+        console.log("初始化地图",this.map);
+          // this.map = new AMap.Map('mapContainer', {//设置地图容器id
+          //   viewMode: '2D', //是否为3D地图模式
+          //   zoom: 15, //初始化地图层级
+          //   center: this.centerPoint,//初始化地图中心点
+          // });
+        // ===========天地图代码==============
+        // if(!this.map){
+          // 防止二次初始化导致拖拽失效
+          this.map = new T.Map('mapContainer',{
+            projection: 'EPSG:900913' 
+          });
+        // }
+        this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 15);
+        //允许鼠标双击放大地图
+        this.map.enableScrollWheelZoom();
         let arr =[];
+
         for (let i = 0; i < this.pointData.length; i++) {
           // 引入本地图片
-          const localIcon = new AMap.Icon({
-            size: new AMap.Size(30, 34), // 图标尺寸
-            image: this.pointData[i].type=='qy'?companyImg:gasStationImg, // 图片的URL
-            imageSize: new AMap.Size(30, 34), // 图标所用图片大小
-          });
-          var marker = new AMap.Marker({
-            position: [this.pointData[i].fJd, this.pointData[i].fWd],
-            map: this.map,
-            icon:localIcon,
-            offset: new AMap.Pixel(-15, -20),
+          const localIcon = new T.Icon({
+            iconUrl: this.pointData[i].type=='qy'?companyImg:gasStationImg,
+            iconSize: new T.Point(30, 34),
+            iconAnchor: new T.Point(30, 34),
           });
-          arr.push( Object.assign(this.pointData[i], {
-            mapId: marker._amap_id,
-          }))
-          // 将创建的点标记添加到已有的地图实例+
-          marker['arr'] = arr;
-          marker['isActive'] = this.pointData[i].isActive;
-          marker['type'] = this.pointData[i].type;
-          this.map.add([marker]);
-          marker.on("click", this.markerClick);
-          this.markers.push(marker);
-          marker.emit('click', {target: marker});
+          //向地图上添加自定义标注
+          if(this.pointData[i].fJd && this.pointData[i].fWd){
+            this.marker = new T.Marker(new T.LngLat(this.pointData[i].fJd, this.pointData[i].fWd), {icon: localIcon});
+            arr.push( Object.assign(this.pointData[i], {
+              mapId: this.pointData[i].id,
+            }))
+            this.marker['arr'] = arr;
+            this.marker['isActive'] = this.pointData[i].isActive;
+            this.marker['type'] = this.pointData[i].type;
+            this.marker['tid'] = this.pointData[i].id
+            this.marker.addEventListener("click", this.markerClick.bind(null,this.marker));
+            this.markers.push(this.marker);
+            this.map.addOverLay(this.marker);
+          }
         }
+        this.loading = false;
+        console.log('所有makers点',this.markers);
+        // ===========天地图代码==============
+
+
+        //信息窗口实例
+        //循环所有的标记点
+        // console.log('打印pointData',this.pointData);
+        // let arr =[];
+        // for (let i = 0; i < this.pointData.length; i++) {
+        //   // 引入本地图片
+        //   const localIcon = new AMap.Icon({
+        //     size: new AMap.Size(30, 34), // 图标尺寸
+        //     image: this.pointData[i].type=='qy'?companyImg:gasStationImg, // 图片的URL
+        //     imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+        //   });
+        //   var marker = new AMap.Marker({
+        //     position: [this.pointData[i].fJd, this.pointData[i].fWd],
+        //     map: this.map,
+        //     icon:localIcon,
+        //     offset: new AMap.Pixel(-15, -20),
+        //   });
+        //   arr.push( Object.assign(this.pointData[i], {
+        //     mapId: marker._amap_id,
+        //   }))
+        //   // 将创建的点标记添加到已有的地图实例+
+        //   marker['arr'] = arr;
+        //   marker['isActive'] = this.pointData[i].isActive;
+        //   marker['type'] = this.pointData[i].type;
+        //   this.map.add([marker]);
+        //   marker.on("click", this.markerClick);
+        //   this.markers.push(marker);
+        //   marker.emit('click', {target: marker});
+        // }
+
+
         // AMap.plugin('AMap.DistrictSearch', function () {
         //   //创建行政区查询对象
         //   var options = {
@@ -484,27 +537,34 @@ export default {
       });
     },
     //点击点标记事件
-  async  markerClick(e) {
-    console.log('打印e',e);
-    let arrNew = e.target.arr.filter((x) => x.mapId == e.target._amap_id);
-    console.log('打印e',e.target.type);
+  async  markerClick(event,e) {
+    console.log("event",event);
+    console.log('打印e',e.target);
+    // return
+    let arrNew = e.target.arr.filter((x) => x.id == e.target.tid);
+    console.log('打印arrNew[0]',arrNew[0]);
       // 引入本地图片
-      if (!e.target.isActive) {
-        e.target.isActive = true;
-        this.clickMapId = '';
-      } else {
-        e.target.isActive = false;
-        this.clickMapId = e.target._amap_id;
-        switch  ( e.target.type){
+      // if (!e.target.isActive) {
+      //   e.target.isActive = true;
+      //   this.companyInfoDataVisible = false;
+      //   this.gasStationInfoVisible = false;
+      //   this.clickMapId = '';
+      // } else {
+        // this.clickMapId = e.target._amap_id;
+        this.clickMapId = e.target.tid;
+        console.log("true",this.clickMapId);
+        switch  (e.target.type){
           case 'qy':
             this.companyInfoDataVisible = true;
             this.companyInfoList = await this.$assignValues(arrNew[0], this.companyInfoList);
             this.companyInfoList1 = await this.$createDoubleArray(this.companyInfoList,2);
+            console.log("企业1",this.companyInfoList);
+            console.log("企业2",this.companyInfoList1);
             break;
           case 'qz':
             this.gasStationInfoVisible = true;
             this.gasStationInfoList = await this.$assignValues(arrNew[0], this.gasStationInfoList);
-            console.log('打印arrNew[0]',arrNew[0]);
+            console.log("气站",this.gasStationInfoList);
             this.gasStationInfoList.map(async (item)=>{
               if(item.type == 'img' && item.value !=='— —'){
                 console.log('打印item', item);
@@ -518,33 +578,63 @@ export default {
             this.gasStationInfoList1 = await this.$createDoubleArray(this.gasStationInfoList,2);
             break;
         }
-      }
+      // }
+      // this.markers.forEach((marker) => {
+      //   const newIcon = new AMap.Icon({
+      //     size: new AMap.Size(30, 34), // 图标尺寸
+      //     image: marker.type=='qy'?companyImgHigh:gasStationImgHigh, // 图片的URL
+      //     imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+      //   });
+      //   const oldIcon = new AMap.Icon({
+      //     size: new AMap.Size(30, 34), // 图标尺寸
+      //     image: marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
+      //     imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+      //   });
+      //   if (marker._amap_id !== this.clickMapId) {
+      //     marker.isActive = true;
+      //     marker.setIcon(oldIcon);
+      //   }else{
+      //     marker.isActive = false;
+      //     console.log('打印marker',marker);
+      //     marker.setIcon(newIcon);
+      //   }
+      // });
       this.markers.forEach((marker) => {
-        const newIcon = new AMap.Icon({
-          size: new AMap.Size(30, 34), // 图标尺寸
-          image: marker.type=='qy'?companyImgHigh:gasStationImgHigh, // 图片的URL
-          imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+        const newIcon = new T.Icon({
+          iconSize: T.Point(30, 34), // 图标尺寸
+          iconUrl: marker.type=='qy'?companyImgHigh:gasStationImgHigh, // 图片的URL
+          iconAnchor: T.Point(30, 34), // 图标所用图片大小
         });
-        const oldIcon = new AMap.Icon({
-          size: new AMap.Size(30, 34), // 图标尺寸
-          image: marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
-          imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+        const oldIcon = new T.Icon({
+          iconSize: T.Point(30, 34), // 图标尺寸
+          iconUrl: marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
+          iconAnchor: T.Point(30, 34), // 图标所用图片大小
         });
-        if (marker._amap_id !== this.clickMapId) {
-          marker.isActive = true;
+        if (marker.tid !== this.clickMapId) {
+          // marker.isActive = true;
           marker.setIcon(oldIcon);
         }else{
-          marker.isActive = false;
+          // marker.isActive = false;
           console.log('打印marker',marker);
           marker.setIcon(newIcon);
         }
       });
-    console.log('打印arrNew[0]',arrNew[0])
+    // console.log('打印arrNew[0]',arrNew[0])
       // infoWindow.setContent(e.target.content);
     if(!e.target.isActive){
       // 如果已选中，则不做处理
-      var infoWindow = this.createInfoWindow(arrNew[0]);
-      infoWindow.open(this.map, e.target.getPosition());
+      let content = e.target.type=='qy'?this.$refs.companyInfoData: this.$refs.gasStationInfoData;
+      var lnglat = new T.LngLat(e.lnglat.lng, e.lnglat.lat);
+      console.log("content",content);
+      console.log("lnglat",lnglat);
+      var infoWin = new T.InfoWindow();
+      infoWin.setLngLat(lnglat);
+      infoWin.setContent(content);
+      this.map.openInfoWindow(content,lnglat);
+      this.map.panTo(lnglat);
+      // this.map.centerAndZoom(lnglat);
+      this.map.checkResize(); 
+      // infoWindow.open(this.map, e.target.getPosition());
     }
       // 更新选中的标记点
       // 设置当前点击的标记点样式
@@ -581,24 +671,31 @@ export default {
         // content: this.getContent(),
         offset: new AMap.Pixel(-180, -50),
       })
+      console.log("infoWindowData",infoWindowData);
       return infoWindowData
     },
     closeInfoWindow(e) {
       // 引入本地图片
       this.markers.forEach((marker) => {
         console.log('打印marker', marker);
-        const oldIcon = new AMap.Icon({
-          size: new AMap.Size(30, 34), // 图标尺寸
-          image:marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
-          imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+        // const oldIcon = new AMap.Icon({
+        //   size: new AMap.Size(30, 34), // 图标尺寸
+        //   image:marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
+        //   imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+        // });
+        const oldIcon = new T.Icon({
+          iconSize: T.Point(30, 34), // 图标尺寸
+          iconUrl:marker.type=='qy'?companyImg:gasStationImg, // 图片的URL
+          iconAnchor: T.Point(30, 34), // 图标所用图片大小
         });
-        if (marker._amap_id == this.clickMapId) {
+        if (marker.tid == this.clickMapId) {
           marker.isActive = true;
           marker.setIcon(oldIcon);
         }
       });
       this.clickMapId = '';
-      this.map.clearInfoWindow();
+      // this.map.clearInfoWindow();
+      this.map.closeInfoWindow();
     },
   }
 }
@@ -619,6 +716,25 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
+
+::v-deep .tdt-infowindow-content-wrapper{
+  box-shadow:none;
+  background:rgba(255, 255, 255, 0);
+}
+
+::v-deep .tdt-infowindow-close-button{
+  display: none;
+}
+
+::v-deep .tdt-infowindow-tip-container{
+  display: none;
+}
+
+::v-deep .tdt-infowindow{
+  bottom: 40px !important;
+  left: -360px !important;
+}
+
 #mapContainer {
   min-width: 865px;
   min-height: 630px;
diff --git a/frontend/front/src/views/pages/gasCylinderManage/gasCylinderMap/index.vue b/frontend/front/src/views/pages/gasCylinderManage/gasCylinderMap/index.vue
index c7a5642..57ceb4a 100644
--- a/frontend/front/src/views/pages/gasCylinderManage/gasCylinderMap/index.vue
+++ b/frontend/front/src/views/pages/gasCylinderManage/gasCylinderMap/index.vue
@@ -31,14 +31,14 @@
         </el-form-item>
       </el-form>
     </div>
-    <div class="mapSty">
+    <div class="mapSty" v-loading="loading">
       <div id="mapContainer"
            class="map"
            tabindex="0">
       </div>
     </div>
     <div ref="infoData"
-         v-if="infoWindowVisible"
+         v-show="infoWindowVisible"
          class="custom-info input-card content-window-card">
       <div class="info-top" style="display: flex; justify-content: space-between;align-items: center">
         <div>
@@ -375,6 +375,7 @@ export default {
       pointData: [],
       nodeList:[],
       centerPoint:[114.347441, 30.50438],
+      loading:false,
     }
   },
   mounted() {
@@ -431,6 +432,7 @@ export default {
     },
     //查询按钮
     handleSearch() {
+      this.markers = [];
       this.pointData = [];
       this.infoWindowVisible = false;
       this.getMarkPoint();
@@ -443,12 +445,17 @@ export default {
       this.handleSearch();
     },
    async  getMarkPoint(){
+      this.loading = true;
       let params ={
         qzId:this.queryForm.qzId,
         qyId: this.queryForm.qyId,
       }
       await getAppTagTypes(params).then((res)=>{
         let { code, value} = res;
+        if(!value.length){
+         this.loading = false;
+         return 
+        }
         if(code == 200){
           value.map((item,index)=>{
             if(item.typeone.length>0){
@@ -502,43 +509,93 @@ export default {
           version: '2.0' //数据可视化
         }
       }).then((AMap) => {
-        this.map = new AMap.Map('mapContainer', {//设置地图容器id
-          viewMode: '2D', //是否为3D地图模式
-          zoom: 16, //初始化地图层级
-          center: this.centerPoint,//初始化地图中心点
-        });
-        //信息窗口实例
-        //循环所有的标记点
-        console.log('打印pointData',this.pointData);
-        let arr =[];
-        for (let i = 0; i < this.pointData.length; i++) {
-          const num = i + 1;
-          const contentImg = '<div style="color: #fff; width: 50px;height: 50px;"><img src="./src/assets/images/后台.png" />'+num + "</div>"
-          // 引入本地图片
-          const localIcon = new AMap.Icon({
-            size: new AMap.Size(30, 34), // 图标尺寸
-            image: iconImg, // 图片的URL
-            imageSize: new AMap.Size(30, 34), // 图标所用图片大小
-          });
-          var marker = new AMap.Marker({
-            position: [this.pointData[i].fjd, this.pointData[i].fwd],
-            map: this.map,
-            icon:localIcon,
-            offset: new AMap.Pixel(-15, -20),
+        // this.map = new AMap.Map('mapContainer', {//设置地图容器id
+        //   viewMode: '2D', //是否为3D地图模式
+        //   zoom: 16, //初始化地图层级
+        //   center: this.centerPoint,//初始化地图中心点
+        // });
+
+        // ===========天地图代码==============
+        if(!this.map){
+          // 防止二次初始化导致拖拽失效
+          this.map = new T.Map('mapContainer',{
+            projection: 'EPSG:900913' 
           });
-          arr.push( Object.assign(this.pointData[i], {
-            mapId: marker._amap_id,
-          }))
-          // 将创建的点标记添加到已有的地图实例+
+        }
+        this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 16);
+        //允许鼠标双击放大地图
+        this.map.enableScrollWheelZoom();
+        let arr = [];
+        const seenCoordinates = new Set(); // 记录已经处理的经纬度
+
+        for (let i = 0; i < this.pointData.length; i++) {
+          const point = this.pointData[i];
+          const coordsKey = `${point.fjd},${point.fwd}`; // 使用经纬度创建唯一的键
+          // 如果经纬度之前未处理过，则添加到数组和地图
+
+            // 创建本地图标
+            const localIcon = new T.Icon({
+              iconUrl: iconImg,
+              iconSize: new T.Point(30, 34),
+              iconAnchor: new T.Point(30, 34),
+            });
+
+            // 创建自定义标记
+          const marker = new T.Marker(new T.LngLat(point.fjd, point.fwd), { icon: localIcon });
+          arr.push(Object.assign(point, { mapId: point.id }));
           marker['arr'] = arr;
-          marker['isActive'] = this.pointData[i].isActive;
-          // console.log('marker=====', marker);
-          this.map.add([marker]);
-          // marker.content = '我是第' + (i + 1) + '个Marker';
-          marker.on("click", this.markerClick);
+          marker['isActive'] = point.isActive;
+          marker['type'] = point.type;
+          marker['tid'] = point.id;
           this.markers.push(marker);
-          marker.emit('click', {target: marker});
+          if (!seenCoordinates.has(coordsKey)) {
+            seenCoordinates.add(coordsKey);
+            // 绑定点击事件
+            marker.addEventListener("click", this.markerClick.bind(null, marker));
+            // 将标记添加到地图
+            this.map.addOverLay(marker);
+          }
         }
+        // 创建并添加标记集群
+        new T.MarkerClusterer(this.map, { markers: this.markers });
+        // 更新加载状态
+        this.loading = false;
+        // ===========天地图代码==============
+
+
+        //信息窗口实例
+        //循环所有的标记点
+        // console.log('打印pointData',this.pointData);
+        // let arr =[];
+        // for (let i = 0; i < this.pointData.length; i++) {
+        //   const num = i + 1;
+        //   const contentImg = '<div style="color: #fff; width: 50px;height: 50px;"><img src="./src/assets/images/后台.png" />'+num + "</div>"
+        //   // 引入本地图片
+        //   const localIcon = new AMap.Icon({
+        //     size: new AMap.Size(30, 34), // 图标尺寸
+        //     image: iconImg, // 图片的URL
+        //     imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+        //   });
+        //   var marker = new AMap.Marker({
+        //     position: [this.pointData[i].fjd, this.pointData[i].fwd],
+        //     map: this.map,
+        //     icon:localIcon,
+        //     offset: new AMap.Pixel(-15, -20),
+        //   });
+        //   arr.push( Object.assign(this.pointData[i], {
+        //     mapId: marker._amap_id,
+        //   }))
+        //   // 将创建的点标记添加到已有的地图实例+
+        //   marker['arr'] = arr;
+        //   marker['isActive'] = this.pointData[i].isActive;
+        //   // console.log('marker=====', marker);
+        //   this.map.add([marker]);
+        //   // marker.content = '我是第' + (i + 1) + '个Marker';
+        //   // marker.on("click", this.markerClick);
+        //   this.markers.push(marker);
+        //   marker.emit('click', {target: marker});
+        // }
+        return
         AMap.plugin('AMap.DistrictSearch', function () {
           //创建行政区查询对象
           var options = {
@@ -577,43 +634,81 @@ export default {
       });
     },
     //点击点标记事件
-    markerClick(e) {
-      this.infoWindowVisible = true;
-      let arrNew = e.target.arr.filter((x) => x.mapId == e.target._amap_id);
+    markerClick(event,e) {
+      // this.infoWindowVisible = true;
+      let arrNew = e.target.arr.filter((x) => x.mapId == e.target.tid);
       this.devInfo = arrNew && arrNew[0];
       // infoWindow.setContent(e.target.content);
       console.log('打印res', arrNew);
       // 如果已选中，则不做处理
+      this.clickMapId = e.target.tid;
+      if (!e.target.isActive) {
+        // 如果已选中，则不做处理
+        this.getPointDetailInfo(arrNew[0].fqptm, e);
+        this.infoWindowVisible = true;
+        let content = this.$refs.infoData;
+        if (!content) return
+        var lnglat = new T.LngLat(e.lnglat.lng, e.lnglat.lat);
+        console.log("content", content);
+        console.log("lnglat", lnglat);
+        var infoWin = new T.InfoWindow();
+        infoWin.setLngLat(lnglat);
+        infoWin.setContent(content);
+        this.map.openInfoWindow(content, lnglat);
+        this.map.panTo(lnglat); 
+      }
 
-      // 引入本地图片
-      const newIcon = new AMap.Icon({
-        size: new AMap.Size(30, 34), // 图标尺寸
-        image: iconImg1, // 图片的URL
-        imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+      const newIcon = new T.Icon({
+        iconSize: T.Point(30, 34), // 图标尺寸
+        iconUrl: iconImg1, // 图片的URL
+        iconAnchor: T.Point(30, 34), // 图标所用图片大小
       });
-      const oldIcon = new AMap.Icon({
-        size: new AMap.Size(30, 34), // 图标尺寸
-        image: iconImg, // 图片的URL
-        imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+      const oldIcon = new T.Icon({
+        iconSize: T.Point(30, 34), // 图标尺寸
+        iconUrl: iconImg, // 图片的URL
+        iconAnchor: T.Point(30, 34), // 图标所用图片大小
       });
-      if (!e.target.isActive) {
-        e.target.isActive = true;
-        this.clickMapId = '';
-      } else {
-        e.target.isActive = false;
-        this.getPointDetailInfo(arrNew[0].fqptm,e);
-        this.clickMapId = e.target._amap_id;
-      }
+
       this.markers.forEach((marker) => {
-        if (marker._amap_id !== this.clickMapId) {
-          marker.isActive = true;
+        if (marker.tid !== this.clickMapId) {
+          // marker.isActive = true;
           marker.setIcon(oldIcon);
-        }else{
-          marker.isActive = false;
-          console.log('打印marker',marker);
+        } else {
+          // marker.isActive = false;
+          console.log('打印marker', marker);
           marker.setIcon(newIcon);
         }
       });
+
+      // 引入本地图片
+      // const newIcon = new AMap.Icon({
+      //   size: new AMap.Size(30, 34), // 图标尺寸
+      //   image: iconImg1, // 图片的URL
+      //   imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+      // });
+      // const oldIcon = new AMap.Icon({
+      //   size: new AMap.Size(30, 34), // 图标尺寸
+      //   image: iconImg, // 图片的URL
+      //   imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+      // });
+      // if (!e.target.isActive) {
+      //   e.target.isActive = true;
+      //   this.clickMapId = '';
+      // } else {
+      //   e.target.isActive = false;
+      //   this.getPointDetailInfo(arrNew[0].fqptm,e);
+      //   this.clickMapId = e.target._amap_id;
+      // }
+      // this.markers.forEach((marker) => {
+      //   if (marker._amap_id !== this.clickMapId) {
+      //     marker.isActive = true;
+      //     marker.setIcon(oldIcon);
+      //   }else{
+      //     marker.isActive = false;
+      //     console.log('打印marker',marker);
+      //     marker.setIcon(newIcon);
+      //   }
+      // });
       // 更新选中的标记点
       // 设置当前点击的标记点样式
       // e.target.setIcon(newIcon); // 或者其他方法来重置样式
@@ -626,8 +721,8 @@ export default {
         console.log('打印res',res);
         const { value} = res;
         const {qpdqlzs,qpOrderInfoVO} = value;
-        var infoWindow = this.createInfoWindow();
-        infoWindow.open(this.map, e.target.getPosition());
+        // var infoWindow = this.createInfoWindow();
+        // infoWindow.open(this.map, e.target.getPosition());
         this.devInfoList = await this.$assignValues(value, this.devInfoList);
         this.nodeList = await this.$createDoubleArray(qpdqlzs,5);
         console.log('打印this.nodeList', this.nodeList);
@@ -653,19 +748,32 @@ export default {
     },
     closeInfoWindow() {
       // 引入本地图片
-      const oldIcon = new AMap.Icon({
-        size: new AMap.Size(30, 34), // 图标尺寸
-        image: iconImg, // 图片的URL
-        imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+      // const oldIcon = new AMap.Icon({
+      //   size: new AMap.Size(30, 34), // 图标尺寸
+      //   image: iconImg, // 图片的URL
+      //   imageSize: new AMap.Size(30, 34), // 图标所用图片大小
+      // });
+      // this.markers.forEach((marker) => {
+      //   if (marker._amap_id == this.clickMapId) {
+      //     marker.isActive = true;
+      //     marker.setIcon(oldIcon);
+      //   }
+      // });
+      // this.clickMapId = '';
+      // this.map.clearInfoWindow();
+
+      const oldIcon = new T.Icon({
+        iconSize: T.Point(30, 34), // 图标尺寸
+        iconUrl: iconImg, // 图片的URL
+        iconAnchor: T.Point(30, 34), // 图标所用图片大小
       });
       this.markers.forEach((marker) => {
-        if (marker._amap_id == this.clickMapId) {
-          marker.isActive = true;
+        if (marker.tid == this.clickMapId) {
           marker.setIcon(oldIcon);
         }
       });
       this.clickMapId = '';
-      this.map.clearInfoWindow();
+      this.map.closeInfoWindow();
     },
   }
 }
@@ -686,6 +794,24 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
+::v-deep .tdt-infowindow-content-wrapper {
+  box-shadow: none;
+  background: rgba(255, 255, 255, 0);
+}
+
+::v-deep .tdt-infowindow-close-button {
+  display: none;
+}
+
+::v-deep .tdt-infowindow-tip-container {
+  display: none;
+}
+
+::v-deep .tdt-infowindow {
+  bottom: 40px !important;
+  left: -360px !important;
+}
+
 #mapContainer {
   min-width: 865px;
   min-height: 630px;
diff --git a/frontend/front/src/views/pages/regionalManage/components/regionManage.vue b/frontend/front/src/views/pages/regionalManage/components/regionManage.vue
index b88423a..1901eff 100644
--- a/frontend/front/src/views/pages/regionalManage/components/regionManage.vue
+++ b/frontend/front/src/views/pages/regionalManage/components/regionManage.vue
@@ -209,6 +209,7 @@ export default {
         size:10,
         total:0
       },
+      handler:null,
 
     }
   },
@@ -362,92 +363,152 @@ export default {
         }
       }).then((AMap)=>{
         console.log('打印AMap====>',AMap);
-        this.map = new AMap.Map('mapContainer', {//设置地图容器id
-          viewMode: '2D', //是否为3D地图模式
-          zoom: 16, //初始化地图层级
-          center: this.centerPoint,//初始化地图中心点
+        let that = this;
+        this.map = new T.Map('mapContainer',{
+          projection: 'EPSG:900913' 
         });
+        this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 16);
+        //允许鼠标双击放大地图
+        this.map.enableScrollWheelZoom();
+        // 允许拖拽
+        setTimeout(function () {
+          that.map.enableDrag();
+        }, 500);
+
+        var config = {
+            showLabel: true,
+            color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
+        };
+        //创建标注工具对象
+        this.polygonTool = new T.PolygonTool(this.map, config);
+
+
+        // this.map = new AMap.Map('mapContainer', {//设置地图容器id
+        //   viewMode: '2D', //是否为3D地图模式
+        //   zoom: 16, //初始化地图层级
+        //   center: this.centerPoint,//初始化地图中心点
+        // });
+
+
         // this.map.on('rightclick', (e)=> {
         //   this.rightclickObj(); //定义右键内容
         //   this.contextMenu.open(this.map, e.lnglat);
         //   this.contextMenuPositon = e.lnglat; //右键菜单位置
         // });
-        let that = this;
-        this.mouseTool =new AMap.MouseTool(this.map);
-        this.mouseTool.on('draw',function (e){
-          if(that.overlays.length>0){
-            console.log('打印this.overlays=====>',that.overlays);
-            that.map.remove(that.overlays);
-            //关闭绘画
-            // that.mouseTool.close(true);
-            that.overlays = [];
-          }
-          if(that.dialogParams.fShape == '圆形'){
-            let circleCenterPoint = e.obj.getCenter(); //获取圆形坐标点
-            let circleRadius = e.obj.getRadius();//获取半径
-            that.dialogParams.radius = circleRadius;
-            let circlePointList = [
-              {
-                jd:circleCenterPoint.lng,
-                wd:circleCenterPoint.lat
-              }
-            ];
-            that.circleOverlays = circlePointList;
-            console.log('打印position',circleCenterPoint,circleRadius);
-          }
-          that.overlays.push(e.obj);
-          console.log('打印that.overlays',that.overlays);
-        })
+      
+        // let that = this;
+        // this.mouseTool = new AMap.MouseTool(this.map);
+        // this.mouseTool.on('draw',function (e){
+        //   console.log("e======",e);
+        //   if(that.overlays.length>0){
+        //     console.log('打印this.overlays=====>',that.overlays);
+        //     that.map.remove(that.overlays);
+        //     //关闭绘画
+        //     // that.mouseTool.close(true);
+        //     that.overlays = [];
+        //   }
+        //   if(that.dialogParams.fShape == '圆形'){
+        //     let circleCenterPoint = e.obj.getCenter(); //获取圆形坐标点
+        //     let circleRadius = e.obj.getRadius();//获取半径
+        //     that.dialogParams.radius = circleRadius;
+        //     let circlePointList = [
+        //       {
+        //         jd:circleCenterPoint.lng,
+        //         wd:circleCenterPoint.lat
+        //       }
+        //     ];
+        //     that.circleOverlays = circlePointList;
+        //     console.log('打印position',circleCenterPoint,circleRadius);
+        //   }
+        //   that.overlays.push(e.obj);
+        //   console.log('打印that.overlays',that.overlays);
+        // })
         if(this.dialogParams.dialogType == 'edit'){
-          var editShap = null;
+          // var editShap = null;
           if(this.dialogParams.fShape == '圆形'){
-             editShap = new AMap.Circle({
-              center: this.dialogParams.centerOfCircle,
-              radius: this.dialogParams.radius, //半径
-              borderWeight: 3,
-              strokeColor: "#FF33FF",
-              // strokeOpacity: 1,
-              strokeWeight: 6,
-              strokeOpacity: 0.2,
-              fillOpacity: 0.4,
-              strokeStyle: 'dashed',
-              strokeDasharray: [10, 10],
-              // 线样式还支持 'dashed'
-              fillColor: '#1791fc',
-              zIndex: 50,
-            });
-            this.mapEditor = new AMap.CircleEditor(this.map, editShap);
-          }else if(this.dialogParams.fShape == '矩形'){
-            var southWest = new AMap.LngLat(this.dialogParams.rectangleSouthPoint[0], this.dialogParams.rectangleSouthPoint[1])
-            var northEast = new AMap.LngLat(this.dialogParams.rectangleNothPoint[0], this.dialogParams.rectangleNothPoint[1])
-            var bounds = new AMap.Bounds(southWest, northEast)
-            editShap = new AMap.Rectangle({
-              bounds: bounds,
-              strokeColor:'#FF33FF',
-              strokeWeight: 6,
-              strokeOpacity:0.2,
-              strokeDasharray: [30,10],
-              // strokeStyle还支持 solid
-              // 线样式还支持 'dashed'
-              fillColor: '#1791fc',
-              strokeStyle: 'dashed',
+            this.handler = new T.Circle(new T.LngLat(
+              this.dialogParams.centerOfCircle[0], 
+              this.dialogParams.centerOfCircle[1]),
+              parseInt(this.dialogParams.radius),{
+              color:"blue",
+              weight:5,
+              opacity:0.5,
+              fillColor:"#FFFFFF",
               fillOpacity:0.5,
-              cursor:'pointer',
-              zIndex:50,
-            });
-            this.mapEditor = new AMap.RectangleEditor(this.map, editShap);
-          }else {
-            editShap = new AMap.Polygon({
-              path: this.dialogParams.polygonPoint,
-              strokeColor: "#FF33FF",
-              strokeWeight: 6,
-              strokeOpacity: 0.2,
-              fillOpacity: 0.4,
-              fillColor: '#1791fc',
-              zIndex: 50,
+              lineStyle:"solid"});
+              this.handler.enableEdit();
+              this.handler.on("edit",this.editPointsDrawCircle);
+              this.map.addOverLay(this.handler);
+            //  editShap = new AMap.Circle({
+            //   center: this.dialogParams.centerOfCircle,
+            //   radius: this.dialogParams.radius, //半径
+            //   borderWeight: 3,
+            //   strokeColor: "#FF33FF",
+            //   // strokeOpacity: 1,
+            //   strokeWeight: 6,
+            //   strokeOpacity: 0.2,
+            //   fillOpacity: 0.4,
+            //   strokeStyle: 'dashed',
+            //   strokeDasharray: [10, 10],
+            //   // 线样式还支持 'dashed'
+            //   fillColor: '#1791fc',
+            //   zIndex: 50,
+            // });
+            // this.mapEditor = new AMap.CircleEditor(this.map, editShap);
+          }else if(this.dialogParams.fShape == '矩形'){
+            // var southWest = new AMap.LngLat(this.dialogParams.rectangleSouthPoint[0], this.dialogParams.rectangleSouthPoint[1])
+            // var northEast = new AMap.LngLat(this.dialogParams.rectangleNothPoint[0], this.dialogParams.rectangleNothPoint[1])
+            // var bounds = new AMap.Bounds(southWest, northEast)
+            // editShap = new AMap.Rectangle({
+            //   bounds: bounds,
+            //   strokeColor:'#FF33FF',
+            //   strokeWeight: 6,
+            //   strokeOpacity:0.2,
+            //   strokeDasharray: [30,10],
+            //   // strokeStyle还支持 solid
+            //   // 线样式还支持 'dashed'
+            //   fillColor: '#1791fc',
+            //   strokeStyle: 'dashed',
+            //   fillOpacity:0.5,
+            //   cursor:'pointer',
+            //   zIndex:50,
+            // });
+            // this.mapEditor = new AMap.RectangleEditor(this.map, editShap);
+            var bounds = new T.LngLatBounds(new T.LngLat(
+            this.dialogParams.rectangleSouthPoint[0],
+            this.dialogParams.rectangleSouthPoint[1]),
+            new T.LngLat( 
+              this.dialogParams.rectangleNothPoint[0],
+              this.dialogParams.rectangleNothPoint[1]
+            ));
+            this.handler = new T.Rectangle(bounds);
+            this.handler.enableEdit();
+            this.handler.on("edit",this.editPointsDrawRectangle);
+            this.map.addOverLay(this.handler);
+          } else {
+            // editShap = new AMap.Polygon({
+            //   path: this.dialogParams.polygonPoint,
+            //   strokeColor: "#FF33FF",
+            //   strokeWeight: 6,
+            //   strokeOpacity: 0.2,
+            //   fillOpacity: 0.4,
+            //   fillColor: '#1791fc',
+            //   zIndex: 50,
+            // });
+            // this.mapEditor = new AMap.PolyEditor(this.map, editShap);
+            var points = [];
+            this.dialogParams.polygonPoint.map(item =>{
+              points.push(new T.LngLat(item[0], item[1]));
+            })
+            this.handler = new T.Polygon(points,{
+                color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
             });
-            this.mapEditor = new AMap.PolyEditor(this.map, editShap);
+            //向地图上添加面
+           this.handler.enableEdit();
+           this.handler.on("edit",this.editPointsDrawPolygon);
+           this.map.addOverLay(this.handler);
           }
+          return
           editShap.setMap(this.map);
           // 缩放地图到合适的视野级别
           this.map.setFitView([ editShap ]);
@@ -475,34 +536,131 @@ export default {
     },
     //结束编辑
     closeDraw(){
-      this.mapEditor.close();
+      // this.mapEditor.close();
+      this.handler.disableEdit();
+    },
+    getPointsDrawPolygon(e){
+      let that = this;
+      let arry = e.currentLnglats;
+      arry.forEach(item => {
+         that.overlays.push({ 
+          jd:item.lng,
+          wd:item.lat 
+        });
+      });
+      that.overlays.push(that.overlays[0])
+      console.log('多边形overlays===',JSON.parse(JSON.stringify(this.overlays)));
+    },
+    // 编辑多边形
+    editPointsDrawPolygon(e){
+      let that = this;
+      let lines = this.handler.getLngLats();
+      let arry = lines[0];
+      arry.forEach(item => {
+         that.overlays.push({ 
+          jd:item.lng,
+          wd:item.lat 
+        });
+      });
+      that.overlays.push(that.overlays[0])
+      console.log('编辑多边形overlays===',JSON.parse(JSON.stringify(this.overlays)));
+    },
+    getPointsDrawRectangle(e){
+      let that = this;
+      let arry = e.currentBounds;
+      let southwest = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 西南角
+      let northeast = { jd: arry.kq.lng, wd: arry.kq.lat }; // 东北角
+      let northwest = { jd: arry.Lq.lng, wd: arry.kq.lat }; // 西北角
+      let southeast = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 东南角
+      // 将四个角点推入 overlays 数组
+      that.overlays = [southwest, northwest, northeast, southeast];
+      console.log("矩形===",this.overlays);
+    },
+    //编辑矩形
+    editPointsDrawRectangle(e){
+      console.log("编辑矩形",e);
+      // console.log("矩形范围",this.handler.getBounds());
+      let that = this;
+      let arry = e.target.Qr;
+      let southwest = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 西南角
+      let northeast = { jd: arry.kq.lng, wd: arry.kq.lat }; // 东北角
+      let northwest = { jd: arry.Lq.lng, wd: arry.kq.lat }; // 西北角
+      let southeast = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 东南角
+      // 将四个角点推入 overlays 数组
+      that.overlays = [southwest, northwest, northeast, southeast];
+      console.log("矩形===",this.overlays);
+    },
+    getPointsDrawCircle(e){
+      console.log("圆形",e);
+      let arry = e.currentCenter;
+      let circleRadius = e.currentRadius
+      this.overlays = [{jd:arry.lng, wd:arry.lat}]
+      this.circleOverlays = [{jd:arry.lng, wd:arry.lat}]
+      this.dialogParams.radius = circleRadius
+    },
+    // 编辑圆形
+    editPointsDrawCircle(e){
+      console.log("编辑圆形e",e);
+      let center,radius;
+      center = this.handler.getCenter();
+      radius = this.handler.getRadius();
+      this.overlays = [{jd:center.lng, wd:center.lat}];
+      this.circleOverlays = [{jd:center.lng, wd:center.lat}];
+      this.dialogParams.radius = radius;
     },
     //draw 绘制圆形，矩形，多边形
     draw(type,shapType){
       if(this.dialogParams.dialogType == 'edit'){
-        this.mapEditor.close();
+        this.handler.close();
+        // this.handler.clear();
+        // this.mapEditor.close();
       }
+      this.overlays = [];
       this.dialogParams.fShape = shapType;
       switch (type){
         case 'polygon':{
-          this.mouseTool.polygon({
-            fillColor:'#00b0ff',
-            strokeColor:'#80d8ff'
-          });
+          if (this.handler) {
+            this.handler.close();
+            this.handler.clear();
+          }
+          this.handler = new T.PolygonTool(this.map);
+          this.handler.open();
+          this.handler.addEventListener("draw",this.getPointsDrawPolygon);
+          
+          // this.mouseTool.polygon({
+          //   fillColor:'#00b0ff',
+          //   strokeColor:'#80d8ff'
+          // });
           break;
         }
         case 'rectangle':{
-          this.mouseTool.rectangle({
-            fillColor:'#00b0ff',
-            strokeColor:'#80d8ff'
-          });
+          if (this.handler) {
+            this.handler.close();
+            this.handler.clear();
+          }
+          this.handler = new T.RectangleTool(this.map, {follow: true});
+          this.handler.open();
+          this.handler.addEventListener("draw",this.getPointsDrawRectangle);
+          
+          // this.mouseTool.rectangle({
+          //   fillColor:'#00b0ff',
+          //   strokeColor:'#80d8ff'
+          // });
           break;
         }
         case 'circle':{
-          this.mouseTool.circle({
-            fillColor:'#00b0ff',
-            strokeColor:'#80d8ff'
-          });
+          if (this.handler) {
+            this.handler.close();
+            this.handler.clear();
+          }
+          this.handler = new T.CircleTool(this.map, {follow: true});
+          this.handler.open();
+          this.handler.addEventListener("draw",this.getPointsDrawCircle);
+          
+          // this.mouseTool.circle({
+          //   fillColor:'#00b0ff',
+          //   strokeColor:'#80d8ff'
+          // });
           break;
         }
       }
@@ -511,20 +669,21 @@ export default {
    async handleSubmit(formName){
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
-         console.log('打印this.overlays.',this.overlays)
+         console.log('打印this.overlays',this.overlays)
          if(this.overlays.length<=0){
            this.$message.warning('请规划区域!');
            return;
          }
-         console.log('打印this.overLays',);
-         let jwdDTOListArray = this.overlays[0].getPath().map((item)=>{
-           return {
-             jd:item.lng,
-             wd:item.lat
-           }
-         });
-         jwdDTOListArray.push(jwdDTOListArray[0]);
-         console.log('打印jwdDTOListArray',jwdDTOListArray);
+        //  let jwdDTOListArray = this.overlays[0].getPath().map((item)=>{
+        //   console.log("item222",item);
+        //    return {
+        //      jd:item.lng,
+        //      wd:item.lat
+        //    }
+        //  });
+          // jwdDTOListArray.push(jwdDTOListArray);
+        let jwdDTOListArray = this.overlays
+        console.log("jwdDTOListArray",jwdDTOListArray);
          let params= {
            id:this.dialogParams.id,
            fName: this.dialogParams.regionalName,
@@ -540,9 +699,11 @@ export default {
              radius:this.dialogParams.radius
            }
          }
+         console.log("params",params);
+        //  return;
          await regionalAddEditPort(params).then((res)=>{
            this.dialogParams.dialogVisible = false;
-           this.mouseTool.close(true);
+          //  this.mouseTool.close(true);
            this.overlays = [];
            this.handleSearch();
            this.pageParam.page = 1;
@@ -556,7 +717,7 @@ export default {
     handleDialogClose(){
       this.$refs.dialogParams.resetFields();
       this.dialogParams.dialogVisible = false;
-      this.mouseTool.close(true);
+      // this.mouseTool.close(true);
       this.overlays =  [];
 
     },
@@ -576,6 +737,7 @@ export default {
       this.dialogParams.dialogType= type;
       switch (type){
         case 'add':
+          this.handler = null;
           this.dialogParams.fSsczid = this.rowData.fSsczid;
           this.dialogParams.id ='';
           this.dialogParams.radius = '';
--
libgit2 0.21.2