添加设备拾取坐标

resources/js/components/coordinateMap/index.vue

 <template>
   <div class="amap-page-container">
-    <el-amap-search-box class="search-box" style="top:52px" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
-    <el-amap vid="amapDemo" :center="mapCenter" :zoom="zoom" class="amap-demo" :events="events">
-      <el-amap-marker v-for="marker in markers" :key="marker.id" :position="marker"></el-amap-marker>
+    <el-amap-search-box
+      class="search-box"
+      :search-option="searchOption"
+      :on-search-result="onSearchResult"
+    >
+    </el-amap-search-box>
+    <el-amap
+      vid="amapDemo"
+      :center="mapCenter"
+      :zoom="zoom"
+      class="amap-demo"
+      :plugin="plugin"
+      :events="events"
+    >
+      <el-amap-marker
+        vid="component-marker"
+        :position="[lng, lat]"
+      >
+      </el-amap-marker>
     </el-amap>
     <div class="toolbar">
-      position: {{ lng }}, {{ lat }}
+      坐标: {{ lng }}, {{ lat }}
+      <el-button type="primary" @click="mapConfirm(true)">确定</el-button>
+      <el-button type="info" @click="mapConfirm(false)">取消</el-button>
     </div>
   </div>
 </template>
@@ -15,46 +33,41 @@ import VueAMap from 'vue-amap';
 Vue.use(VueAMap);
 VueAMap.initAMapApiLoader({
   key: '2719fe261fee06a08dcb4980990879da',
-  plugin: ['AMap.Geocoder'],
+  plugin: ['ToolBar'],
   v: '1.4.4',
   uiVersion: '1.0.11',
 });
 export default {
   data() {
+    const self = this;
     return {
       lng: 0,
       lat: 0,
       zoom: 13,
-      center: [114.512417, 38.061424],
-      markers: [
-        [121.59996, 31.197646],
-        [121.40018, 31.197622],
-        [121.69991, 31.207649],
+      center: [114.509327, 38.046555],
+      plugin: [
+        {
+          pName: 'ToolBar',
+          events: {
+            init(instance) {
+              // console.log(instance);
+            },
+          },
+        },
       ],
+      markers: [],
       searchOption: {
-        city: '上海',
-        citylimit: true,
+        city: '石家庄',
+        citylimit: false,
       },
       mapCenter: [114.512417, 38.061424],
       address: '',
       events: {
         click(e) {
-          const self = this;
           const { lng, lat } = e.lnglat;
-          self.lng = lng;
-          self.lat = lat;
-          // var geocoder = VueAMap.Geocoder({
-          //   radius: 1000,
-          //   extensions: 'all',
-          // });
-          // geocoder.getAddress([lng, lat], function(status, result) {
-          //   if (status === 'complete' && result.info === 'OK') {
-          //     if (result && result.regeocode) {
-          //       self.address = result.regeocode.formattedAddress;
-          //       self.$nextTick();
-          //     }
-          //   }
-          // });
+          self.lng = lng.toFixed(6);
+          self.lat = lat.toFixed(6);
+          console.log(lng, lat);
         },
       },
     };
@@ -62,10 +75,11 @@ export default {
   created() {
   },
   methods: {
-    addMarker() {
-      const lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
-      const lat = 31.197646 + Math.round(Math.random() * 500) / 10000;
-      this.markers.push([lng, lat]);
+    mapConfirm(state) {
+      this.$emit(
+        'map-confirm',
+        { state: state, location: this.lng + ', ' + this.lat },
+      );
     },
     onSearchResult(pois) {
       var latSum = 0;
@@ -82,8 +96,8 @@ export default {
           lat: latSum / pois.length,
         };
         this.mapCenter = [center.lng, center.lat];
-        this.lng = center.lng;
-        this.lat = center.lat;
+        this.lng = center.lng.toFixed(6);
+        this.lat = center.lat.toFixed(6);
       }
     },
   },
@@ -92,14 +106,18 @@ export default {
 
 <style>
 .amap-demo {
-  height: 600px !important;
+  height: 90vh !important;
 }
 .search-box {
   position: absolute;
-  top: 25px;
-  left: 20px;
+  top: 60px;
+  left: 30%;
 }
 .amap-page-container {
   position: relative;
+  top: -45px;
+}
+.toolbar {
+  padding: 20px;
 }
 </style>

resources/js/views/device/addDevice.vue

@@ -49,9 +49,8 @@
         </el-form-item>
       </el-form>
     </el-card>
-    <el-drawer title="拾取坐标" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
-      <span style="color: #E6A23C;" @click="positionUrl">如果找不到坐标!请点击</span>
-      <div><CoordinateMap @giveLnglat="getLnglat"></CoordinateMap></div>
+    <el-drawer title="拾取坐标" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="50%" :with-header="false">
+      <div><CoordinateMap @map-confirm="mapConfirmData" @giveLnglat="getLnglat"></CoordinateMap></div>
     </el-drawer>
   </div>
 </template>
@@ -127,6 +126,15 @@ export default {
     this.addUserDevices();
   },
   methods: {
+    mapConfirmData(text) {
+      if (text.state === true) {
+        this.form.devicecoord = text.location;
+        this.drawer = false;
+      }
+      if (text.state === false) {
+        this.drawer = false;
+      }
+    },
     checkPermission,
     onSubmit(formName) {
       this.$refs[formName].validate((valid) => {
@@ -181,6 +189,7 @@ export default {
       this.drawer = false;
     },
     handleClose(done) {
+      console.log(done);
       this.$confirm('确认关闭？')
         .then(_ => {
           done();