Ver Fonte

修改仓库拖动地图获取中心点经纬度及地址

mxx há 3 anos atrás
pai
commit
237d8d99b1

BIN
public/img/zuobiao.gif


+ 87 - 13
src/components/mapdrag/mapdrag.vue

@@ -2,6 +2,17 @@
 .mapContent {
   position: relative;
   margin-top: 80px;
+  .center-add{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    z-index: 999;
+    width: 30px;
+    height: 30px;
+  }
 }
 #mapContainer {
   width: 100%;
@@ -49,6 +60,11 @@
 
 <template>
   <div class="mapContent">
+     <img
+        class='center-add'
+        src="../../../public/img/zuobiao.gif"
+        alt=""
+          />
     <div id="mapContainer"></div>
     <div id="tip" v-show="showFlag === false ? false : true">
       <el-select v-model="province" @change="selectP" placeholder="省">
@@ -78,7 +94,7 @@
         >
         </el-option>
       </el-select>
-     
+      <el-button>经纬度:{{center}}</el-button>
       <el-button @click="positions" type="primary" v-if='!isShowaddress'>确定定位</el-button>
       <el-button @click="anewselect" v-if='!isShowaddress'>重新选择</el-button>
       <el-button @click="submit" v-if='isShowaddress'>确定</el-button>
@@ -119,6 +135,7 @@ export default {
       zoomEnable: true,
       dragEnable: true,
       status: true,
+      center:'',
     }
   },
   props: ['flagVisible', 'position','selectedOptions','isShowaddress','type'],
@@ -174,10 +191,10 @@ export default {
         }
       })
       this.marker = new AMap.Marker({
-        icon: new AMap.Icon({
-          size: new AMap.Size(36, 44),
-          image: image,
-        }),
+        // icon: new AMap.Icon({
+        //   size: new AMap.Size(36, 44),
+        //   image: image,
+        // }),
         map: that.map,
       })
       AMap.plugin(
@@ -219,13 +236,18 @@ export default {
           var geocoder = new AMap.Geocoder({
             radius: 1000,
           })
-          that.map.on('click', function (e) {
-            for (var i = 0, l = that.polygons.length; i < l; i++) {
+          that.map.on('moveend', function(e){debugger
+             that.center = that.map.getCenter(); //获取当前地图中心位置
+             that.center.lat =Number(that.center.lat.toFixed(3))
+             that.center.lng =Number(that.center.lng.toFixed(3))
+              that.center.Q =Number(that.center.Q.toFixed(3))
+             that.center.R =Number(that.center.R.toFixed(3))
+                  for (var i = 0, l = that.polygons.length; i < l; i++) {
               that.polygons[i].setMap(null)
             }
             that.marker.setMap(that.map)
-            that.marker.setPosition(e.lnglat)
-            geocoder.getAddress(e.lnglat, function (status, result) {
+            that.marker.setPosition(that.center)
+            geocoder.getAddress(that.center, function (status, result) {
               if (status === 'complete') {
                 var obj = {}
                 that.province = result.regeocode.addressComponent.province
@@ -234,14 +256,66 @@ export default {
                 obj.formattedAddress = result.regeocode.formattedAddress
                 obj.areacode = result.regeocode.addressComponent.adcode
                 that.address = result.regeocode.formattedAddress
-                obj.lat = e.lnglat.lat
-                obj.lng = e.lnglat.lng
+                obj.lat = that.center.lat
+                obj.lng = that.center.lng
                 that.$emit('pickedAddress', obj)
               } else {
                 that.$emit('pickedAddress', '')
               }
             })
-          })
+          });
+          that.map.on('zoomend', function(){
+            // this.zoom = map.getZoom(); //获取当前地图级别
+            that.center = that.map.getCenter(); //获取当前地图中心位置
+            that.center.lat =Number(that.center.lat.toFixed(3))
+            that.center.lng =Number(that.center.lng.toFixed(3))
+             that.center.Q =Number(that.center.Q.toFixed(3))
+             that.center.R =Number(that.center.R.toFixed(3))
+                       for (var i = 0, l = that.polygons.length; i < l; i++) {
+              that.polygons[i].setMap(null)
+            }
+            that.marker.setMap(that.map)
+            that.marker.setPosition(that.center)
+            geocoder.getAddress(that.center, function (status, result) {
+              if (status === 'complete') {
+                var obj = {}
+                that.province = result.regeocode.addressComponent.province
+                that.city = result.regeocode.addressComponent.city
+                that.district = result.regeocode.addressComponent.district
+                obj.formattedAddress = result.regeocode.formattedAddress
+                obj.areacode = result.regeocode.addressComponent.adcode
+                that.address = result.regeocode.formattedAddress
+                obj.lat = that.center.lat
+                obj.lng = that.center.lng
+                that.$emit('pickedAddress', obj)
+              } else {
+                that.$emit('pickedAddress', '')
+              }
+            })
+          });
+          // that.map.on('click', function (e) {
+          //   for (var i = 0, l = that.polygons.length; i < l; i++) {
+          //     that.polygons[i].setMap(null)
+          //   }
+          //   that.marker.setMap(that.map)
+          //   that.marker.setPosition(e.lnglat)
+          //   geocoder.getAddress(e.lnglat, function (status, result) {
+          //     if (status === 'complete') {
+          //       var obj = {}
+          //       that.province = result.regeocode.addressComponent.province
+          //       that.city = result.regeocode.addressComponent.city
+          //       that.district = result.regeocode.addressComponent.district
+          //       obj.formattedAddress = result.regeocode.formattedAddress
+          //       obj.areacode = result.regeocode.addressComponent.adcode
+          //       that.address = result.regeocode.formattedAddress
+          //       obj.lat = e.lnglat.lat
+          //       obj.lng = e.lnglat.lng
+          //       that.$emit('pickedAddress', obj)
+          //     } else {
+          //       that.$emit('pickedAddress', '')
+          //     }
+          //   })
+          // })
           // 根据坐标点定位,获取地址的详细信息
           if (that.position) {
             that.marker.setMap(that.map)
@@ -268,7 +342,7 @@ export default {
     this.loadmap()
   },
   methods: {
-    positions() {
+    positions() {debugger
       this.status = false
       var status = {
         zoomEnable: false,

+ 1 - 1
src/views/houseSelfCollect/paymentManagement.vue

@@ -730,7 +730,7 @@ export default {
           })
       }
     },
-    print(row) {debugger
+    print(row) {
       console.log('打印数据', row)
       if (sessionStorage.getItem('ws-pf_roleName') == '财务') {
         this.isShowPrintType = true

+ 6 - 1
src/views/warehouse/warehouseManagementAdd.vue

@@ -221,7 +221,7 @@
         </div>
       </div>
       <div style="margin-bottom: 5px" class="small-title">仓库定位</div>
-      <map-drag  @marker="marker" @selectedAddress="selectedAddress" @provinceChange='provinceChange'></map-drag>
+      <map-drag  @marker="marker" @selectedAddress="selectedAddress" @provinceChange='provinceChange' @pickedAddress='getInfo'></map-drag>
     </ws-form>
     <!-- 提交 -->
     <div style="text-align: right; padding: 10px" class="center">
@@ -342,6 +342,11 @@ export default {
     },
   },
   methods: {
+    getInfo(e){
+      console.log(e)
+      this.deptBudgetList.warehousePositioning = e.lat +','+e.lng
+      console.log(this.deptBudgetList.warehousePositioning)
+    },
     close(index) {
       this.addressUrls.splice(index, 1)
     },