演示后需求更改

src/views/info/parkInfo/index.vue

@@ -104,7 +104,9 @@
           <el-input v-model="form.parkName" placeholder="请输入园区名称" />
         </el-form-item>
         <el-form-item label="坐标" prop="location">
-          <el-input v-model="form.location" placeholder="请输入坐标" />
+            <el-input v-model="form.location" @focus="openditu">
+              {{ form.location}}
+            </el-input>
         </el-form-item>
         <el-form-item label="备注" prop="memo">
           <el-input v-model="form.memo" type="textarea" placeholder="请输入内容" />
@@ -115,6 +117,19 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="地图" :visible.sync="dialogVisible" width="80%">
+      <div id='mainMap'>
+        <div id="mapDiv" style="width:100%; height:700px">
+        </div>
+      </div>
+      <input type="button" value="清除" @click='clearmian()' />
+      <input type="button" value="标点工具" @click='openMarkTool()' />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click='tijiao'>确定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -125,6 +140,15 @@ export default {
   name: "ParkInfo",
   data() {
     return {
+      parkList: [],
+      dialogVisible: false,
+      map: null,
+      handler: null,
+      markPoints: '', // 保存标记点的坐标
+      equipmentTypeList: [],
+      areaList: [],
+      roomList: [],
+      buildingList: [],
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -174,6 +198,81 @@ export default {
         this.loading = false;
       });
     },
+    // 销毁天地图
+    destructionTMap ()  {
+      if (this.map) {
+        this.map = null;
+        // 直接将节点给删掉
+        console.log('1qsad');
+
+        const parentEl = document.getElementById('mainMap');
+        const cahildrenEl1 = document.getElementById('mapDiv');
+        if(cahildrenEl1) parentEl.removeChild(cahildrenEl1);
+        // 然后再手动将节点加进来
+        const newCahildrenEl = document.createElement("div");
+        newCahildrenEl.id = 'mapDiv'
+        newCahildrenEl.style = 'height: 700px;width: 100%;'
+        parentEl.appendChild(newCahildrenEl)
+      }
+    },
+
+    tijiao() {
+      console.log('多边形数据:', this.form.rasterLngLat);
+      console.log('多边形数据:', this.markPoints);
+      this.form.location = this.markPoints
+      this.destructionTMap()
+      this.dialogVisible = false;
+    },
+
+    clearmian() {
+      if (this.handler) this.handler.close();
+      this.map.clearOverLays(); // 清除所有覆盖物
+      this.markPoints = ''; // 清除保存的标记点坐标
+    },
+
+    openMarkTool() {
+      console.log("1111111111")
+      if (this.handler) this.handler.close(); // 关闭之前的工具
+
+      this.handler = new T.MarkTool(this.map); // 创建标点工具
+      this.handler.open(); // 打开标点工具
+
+      this.handler.on("mouseup", (e) => {
+        let drawData1 = e.currentLnglat.lat+","+e.currentLnglat.lng;
+        this.markPoints = drawData1;
+      });
+
+      this.handler.on("close", () => {
+        // 标点工具关闭时的处理
+        this.handler = null;
+      });
+    },
+
+
+    openditu() {
+      console.log('打开地图对话框');
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        const T = window.T;
+        const zoom = 12;
+        this.map = new T.Map('mapDiv');
+        this.map.centerAndZoom(new T.LngLat(103.96, 30.66), zoom);
+        // 创建标注工具对象
+        this.handler = new T.MarkTool(this.map);
+        console.log('handler 初始化完成:', this.handler);
+        console.log('kanknak1', this.form.location);
+        let points = new T.LngLat();
+        if (this.form.location) {
+          const coordinates = this.form.location.split(',');
+          points =  new T.LngLat(coordinates[1], coordinates[0]);
+        }
+        // 创建面对象
+        console.log('kanknak2', points);
+        const marker = new T.Marker(points);
+        // 向地图上添加面
+        this.map.addOverLay(marker);
+      });
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -223,9 +322,9 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      if (this.form.location){
-        this.form.location = JSON.parse(this.form.location)
-      }
+      // if (this.form.location){
+      //   this.form.location = JSON.parse(this.form.location)
+      // }
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.parkId != null) {