map

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

@@ -21,7 +21,7 @@
 
 <script>
 let map, marker, polygon, drawingManager, lngLat; // 地图，坐标点，多边形初始化加载，多边形绘制，多边形每个点的集成数组
-const markersArray = []; let overlaysArray = []; // 标注点集合,绘制多边形时的集合
+let overlaysArray = []; // 标注点集合,绘制多边形时的集合
 let path4 = [];// 设置回显数据参数
 // 默认展示假数据回显参数
 let arr = [{ 'lat': 34.80506482194067, 'lng': 113.59760284423828 },
@@ -44,7 +44,7 @@ let arr = [{ 'lat': 34.80506482194067, 'lng': 113.59760284423828 },
 { 'lat': 34.81098454894641, 'lng': 113.64789962768555 },
 { 'lat': 34.81366238099493, 'lng': 113.62936019897461 }]; // 用于数据回显的假数据  后期会调用接口返回数据
 export default {
-  props: ['position'],
+  props: ['position', 'areaMapInfo'],
   data() {
     return {
       longitude: '',
@@ -73,6 +73,7 @@ export default {
         lngLat = path4;
       }
       console.log('确认', lngLat)
+      this.$emit('areaVisibleChange', false, lngLat);
     },
     // 地图初始化
     init() {
@@ -80,11 +81,8 @@ export default {
       const lng = this.position.lng
       map = new qq.maps.Map(document.getElementById('mapFencecontainer'), {
         center: new qq.maps.LatLng(lat, lng), // 暂时默认郑州
-        zoom: 13
+        zoom: 22
       });
-      // 标注的生成与回显
-      this.addMarker(new qq.maps.LatLng(lat, lng)); // 初始化回显标注
-      this.markerOnly();
       // 多边形绘制及回显
       // 设置多边形路径以便回显
       // path4 = [];
@@ -98,42 +96,6 @@ export default {
       // 绘制
       this.addpolygon();
     },
-    // 添加监听事件 获取鼠标单击事件（仅留一个标注点）
-    markerOnly() {
-      qq.maps.event.addListener(map, 'click', function (event) {
-        this.addMarker(event.latLng);
-        qq.maps.event.addListener(map, 'click', function (event) {
-          this.deleteOverlays(); // 删除原有标注仅留下一个
-          marker = new qq.maps.Marker({
-            position: event.latLng,
-            map: map
-          });
-        });
-        var gps = event.latLng.getLat() + ',' + event.latLng.getLng(); // 解析出来的点方便给后端
-      });
-    },
-    // 添加标记
-    addMarker(location) {
-      this.deleteOverlays();
-      var marker = new qq.maps.Marker({
-        position: location,
-        map: map
-      });
-      markersArray.push(marker);
-    },
-    // 删除标记
-    deleteOverlays() {
-      if (markersArray) {
-        // for (i in markersArray) {
-        for (var i = 0; i < markersArray.length; i++) {
-          markersArray[i].setMap(null);
-        }
-        markersArray.length = 0;
-      }
-      if (marker !== undefined) {
-        marker.setMap(null);
-      }
-    },
     /**
  * 多边形绘制
 */
@@ -144,16 +106,12 @@ export default {
         drawingControl: true,
         drawingControlOptions: {
           position: qq.maps.ControlPosition.TOP_CENTER,
-            // drawingModes: [
-            //   qq.maps.drawing.OverlayType.POLYGON
-            // ]
           // 表头显示区域
           drawingModes: [
-            qq.maps.drawing.OverlayType.MARKER,
+            // qq.maps.drawing.OverlayType.CIRCLE,
-            qq.maps.drawing.OverlayType.CIRCLE,
             qq.maps.drawing.OverlayType.POLYGON,
-            qq.maps.drawing.OverlayType.POLYLINE,
+            // qq.maps.drawing.OverlayType.POLYLINE,
-            qq.maps.drawing.OverlayType.RECTANGLE
+            // qq.maps.drawing.OverlayType.RECTANGLE
           ]
         },
         markerOptions: {
@@ -166,13 +124,13 @@ export default {
           fillColor: new qq.maps.Color(202, 67, 58, 0.1),
           clickable: false
         },
-        // 圆形样式
+        // // 圆形样式
-        circleOptions: {
+        // circleOptions: {
-          fillColor: new qq.maps.Color(255, 208, 70, 0.3),
+        //   fillColor: new qq.maps.Color(255, 208, 70, 0.3),
-          strokeColor: new qq.maps.Color(88, 88, 88, 1),
+        //   strokeColor: new qq.maps.Color(88, 88, 88, 1),
-          strokeWeight: 3,
+        //   strokeWeight: 3,
-          clickable: false
+        //   clickable: false
-        }
+        // }
       });
 
       drawingManager.setMap(map);

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

@@ -65,8 +65,9 @@
             </el-col>
             <el-col :span="24">
               <jnpf-form-tip-item label="电子围栏" tipLabel="在地图上绘制电子围栏" prop="areaMapInfo">
-                <JnpfInput v-model="dataForm.areaMapInfo" @focus="handLeArea" placeholder="绘制电子围栏区域" :maxlength="65539"
+                <JnpfInput @focus="handLeArea" placeholder="点击绘制电子围栏"
-                  clearable prefix-icon='el-icon-map-location' :style='{ "width": "100%" }' show-password>
+                  :maxlength="65539" readonly prefix-icon='el-icon-map-location' :style='{ "width": "100%" }'
+                  show-password>
                 </JnpfInput>
               </jnpf-form-tip-item>
             </el-col>
@@ -95,7 +96,7 @@
             <!-- 表单结束 -->
           </template>
         </el-form>
-        <area-dialog :position="position" v-if="areaVisible" @areaVisibleChange="handleAreaVisibleChange"
+        <area-dialog :position="position" :areaMapInfo="dataForm.areaMapInfo" v-if="areaVisible" @areaVisibleChange="handleAreaVisibleChange"
           ref="JNPFForm" />
 
         <!-- <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
@@ -255,8 +256,11 @@ export default {
     handLeArea() {
       this.getPosition()
     },
-    handleAreaVisibleChange(areaVisible) {
+    handleAreaVisibleChange(areaVisible, areaMapInfo) {
       this.areaVisible = areaVisible
+      if (areaMapInfo) {
+        this.dataForm.areaMapInfo = areaMapInfo
+      }
     },
     prev() {
       this.index--