todo

jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue

@@ -24,25 +24,58 @@ let map, marker, polygon, drawingManager, lngLat; // 地图，坐标点，多边
 let overlaysArray = []; // 标注点集合,绘制多边形时的集合
 let path4 = [];// 设置回显数据参数
 // 默认展示假数据回显参数
-let arr = [{ 'lat': 34.80506482194067, 'lng': 113.59760284423828 },
-{ 'lat': 34.780394716350614, 'lng': 113.59365463256836 },
-{ 'lat': 34.760794345237514, 'lng': 113.58541488647461 },
-{ 'lat': 34.7330074293797, 'lng': 113.58455657958984 },
-{ 'lat': 34.70281206762318, 'lng': 113.61854553222656 },
-{ 'lat': 34.70027176815597, 'lng': 113.62884521484375 },
-{ 'lat': 34.6987193245323, 'lng': 113.63296508789062 },
-{ 'lat': 34.69914272113635, 'lng': 113.63880157470703 },
-{ 'lat': 34.699001589175694, 'lng': 113.64498138427734 },
-{ 'lat': 34.698578191849535, 'lng': 113.68309020996094 },
-{ 'lat': 34.73907339121123, 'lng': 113.68206024169922 },
-{ 'lat': 34.738932327388824, 'lng': 113.6920166015625 },
-{ 'lat': 34.76319176276739, 'lng': 113.69218826293945 },
-{ 'lat': 34.763050740134055, 'lng': 113.70386123657227 },
-{ 'lat': 34.7864571976711, 'lng': 113.70214462280273 },
-{ 'lat': 34.786739162702524, 'lng': 113.68206024169922 },
-{ 'lat': 34.809997957307736, 'lng': 113.68223190307617 },
-{ 'lat': 34.81098454894641, 'lng': 113.64789962768555 },
-{ 'lat': 34.81366238099493, 'lng': 113.62936019897461 }]; // 用于数据回显的假数据  后期会调用接口返回数据
+let arr = [
+  {
+    name: '商户1',
+    editable: true,
+    mapInfo: [
+      {
+        mapName: '区域1',
+        areaDot: [
+        {
+          "lat": 34.81183810359681,
+          "lng": 113.64705095998943
+        },
+        {
+          "lat": 34.81134040998215,
+          "lng": 113.64699731580913
+        },
+        {
+          "lat": 34.81148135007192,
+          "lng": 113.64640722982585
+        },
+        {
+          "lat": 34.811912977597295,
+          "lng": 113.646434051916
+        }
+        ]
+      },
+    ]
+  },
+  {
+    name: '商户2',
+    editable: false,
+    mapInfo: [
+      {
+        mapName: '区域1',
+        areaDot: [
+          {
+            "lat": 34.811776442604156,
+            "lng": 113.64557038061321
+          },
+          {
+            "lat": 34.81182048617505,
+            "lng": 113.64621411077678
+          },
+          {
+            "lat": 34.81198344718268,
+            "lng": 113.64581714384258
+          }
+        ]
+      }
+    ]
+  }
+]; // 用于数据回显的假数据  后期会调用接口返回数据
 export default {
   props: ['position', 'areaMapInfo'],
   data() {
@@ -88,14 +121,21 @@ export default {
       });
       // 多边形绘制及回显
       // 设置多边形路径以便回显
-      // path4 = [];
+     
 
       arr.forEach(item => {
-        path4.push(new qq.maps.LatLng(item.lat, item.lng));
+        // 商户
+        item.mapInfo.forEach(e => {
+          // 多个区域
+          path4 = [];
+          e.areaDot.forEach(q => {
+             path4.push(new qq.maps.LatLng(q.lat, q.lng));
+          }) 
+          this.showpolygon(path4, item.editable);
+          console.log(JSON.stringify(path4, null, 2))
+        })
       });
 
-      console.log(path4);
-      this.showpolygon(path4);
       // 绘制,操作
       this.addpolygon();
     },
@@ -111,10 +151,7 @@ export default {
           position: qq.maps.ControlPosition.TOP_CENTER,
           // 表头显示区域
           drawingModes: [
-            // qq.maps.drawing.OverlayType.CIRCLE,
             qq.maps.drawing.OverlayType.POLYGON,
-            // qq.maps.drawing.OverlayType.POLYLINE,
-            // qq.maps.drawing.OverlayType.RECTANGLE
           ]
         },
         markerOptions: {
@@ -127,13 +164,6 @@ export default {
           fillColor: new qq.maps.Color(202, 67, 58, 0.1),
           clickable: false
         },
-        // // 圆形样式
-        // circleOptions: {
-        //   fillColor: new qq.maps.Color(255, 208, 70, 0.3),
-        //   strokeColor: new qq.maps.Color(88, 88, 88, 1),
-        //   strokeWeight: 3,
-        //   clickable: false
-        // }
       });
 
       drawingManager.setMap(map);
@@ -150,21 +180,18 @@ export default {
             lat: lat,
             lng: lng
           });
+          console.log(JSON.stringify(lngLat, null, 2))
         }
         console.log('overlaycomplete',lngLat, overlaysArray); // 获得相应的经纬度值
       });
 
-      qq.maps.event.addListener(drawingManager, 'markercomplete', function (event) {
-        console.log('markercomplete', event); // 获得相应的经纬度值
-      });
-
-
     },
     // 初始化回显
-    showpolygon(path3) {
+    showpolygon(path3, editable) {
       polygon = new qq.maps.Polygon({
         map: map,
-        editable: true,
+        editable,
+        clickable: true,
         strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
         fillColor: new qq.maps.Color(202, 67, 58, 0.1)
       });
@@ -189,7 +216,7 @@ export default {
       overlaysArray = []; // 需要重置为空，否则之前的数据还在这个数组里面
       lngLat = [];
       console.log(drawingManager);
-      this.init();
+      // this.init();
     }
 
   }

jnpf-java-boot/jnpf-web/src/views/stationarea/form.vue

@@ -253,7 +253,8 @@
             geolocation.getLocation(this.showPosition, this.errorPosition);
           },
           handLeArea() {
-            this.getPosition()
+            this.areaVisible = true
+            // this.getPosition()
           },
           handleAreaVisibleChange(areaVisible) {
             this.areaVisible = areaVisible