仓库地图

src/components/mapdrag/mapdrag.vue

@@ -112,7 +112,7 @@
       <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 && !warehousePositioning'>确定</el-button>
+      <el-button @click="submit" v-if='isShowaddress'>确定</el-button>
     </div>
   </div>
 </template>
@@ -147,7 +147,7 @@
         center: '',
       }
     },
-    props: ['flagVisible', 'position', 'selectedOptions', 'isShowaddress', 'type','warehousePositioning'],
+    props: ['flagVisible', 'position', 'selectedOptions', 'isShowaddress', 'type'],
     computed: {
       showFlag() {
         return this.flagVisible
@@ -208,9 +208,6 @@
             that.map.add(marker)
           }
         })
-        if(this.warehousePositioning.lat && this.warehousePositioning.lng){
-            this.map.setCenter([this.warehousePositioning.lat,this.warehousePositioning.lng])
-        }
         this.marker = new AMap.Marker({
           icon: new AMap.Icon({
             size: new AMap.Size(0, 0),

src/components/mapdrag/warehouseMap.vue

@@ -0,0 +1,511 @@
+<style lang='scss' scoped>
+  .mapContent {
+    position: relative;
+    margin-top: 50px;
+
+    .center-add {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      z-index: 999;
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+  #mapContainer {
+    width: 100%;
+    height: 330px;
+  }
+
+  #tip {
+    position: absolute;
+    top: -45px;
+    display: flex;
+  }
+
+  #tip .el-input {
+    // width: 179px;
+    margin-right: 0px;
+  }
+
+  #tip .el-select {
+    margin-right: 10px;
+  }
+
+  #tip .el-select {
+    width: 179px;
+  }
+
+  #tip .el-textarea {
+    width: 179px;
+
+    /deep/ .el-textarea__inner {
+      height: 40px;
+      resize: none;
+    }
+  }
+
+  .el-button--primary {
+    background-color: #5878e8;
+    border-color: #5878e8;
+  }
+
+  .el-button--default {
+    color: #5878e8;
+    border-color: #5473e8;
+  }
+
+  .address {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+
+    // position:absolute;
+    // top: -35px;
+    .address-input {
+      display: inline-block;
+      width: 480px;
+    }
+  }
+</style>
+
+<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="省">
+        <el-option
+          v-for="item in provinces"
+          :key="item.adcode"
+          :label="item.name"
+          :value="item.adcode"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="city" @change="selectC" placeholder="市">
+        <el-option
+          v-for="item in citys"
+          :key="item.adcode"
+          :label="item.name"
+          :value="item.name"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="district" @change="selectD" placeholder="区">
+        <el-option
+          v-for="item in districts"
+          :key="item.adcode"
+          :label="item.name"
+          :value="item.adcode"
+        >
+        </el-option>
+      </el-select> -->
+      <div class="address">
+        <el-input type="text" id="searchValue" placeholder="请输入关键字:" v-model="address" clearable class="address-input">
+        </el-input>
+      </div>
+      <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 && !warehousePositioning'>确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    regionData,
+    CodeToText,
+    TextToCode
+  } from 'element-china-area-data'
+  import image from '../../../public/img/ic_locationmarker.jpg'
+  import AMapLoader from '@amap/amap-jsapi-loader';
+  export default {
+    data() {
+      return {
+        map: null,
+        provinces: [],
+        province: '',
+        districts: [],
+        district: '',
+        citys: [],
+        city: '',
+        polygons: [],
+        selectedOptions1: [],
+        areacode: '',
+        address: '',
+        objPoint: [],
+        markers: [],
+        zoomEnable: true,
+        dragEnable: true,
+        status: true,
+        center: '',
+      }
+    },
+    props: ['flagVisible', 'position', 'selectedOptions', 'isShowaddress', 'type','warehousePositioning'],
+    computed: {
+      showFlag() {
+        return this.flagVisible
+      },
+    },
+    watch: {
+      selectedOptions: {
+        handler(newValue, oldValue) {
+          this.province = CodeToText[newValue[0]]
+          this.selectP(this.province)
+          this.city = CodeToText[newValue[1]]
+          this.selectC(CodeToText[newValue[1]])
+          this.district = newValue[2]
+          this.selectD(this.district)
+        },
+        deep: true
+      }
+    },
+    async created() {
+      
+    },
+    mounted() {
+      
+      // AMapLoader.reset();
+      // 已载入高德地图API，则直接初始化地图
+      if (window.AMap && window.AMapUI) {
+        // 未载入高德地图API，则先载入API再初始化
+      } else {
+        // await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}&plugin=AMap.AutoComplete`)
+        // await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
+        //  AMapLoader.reset();
+        AMapLoader.load({
+          "key": "211dd6f989e719022aaf47ddb0659c47", // 申请好的Web端开发者Key，首次调用 load 时必填
+          "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+          "plugins": ['plugin=AMap.Scale', 'AMap.ToolBar','AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder', 'AMap.DistrictSearch','AMap.Geolocation', 'Geolocation'],
+          "Loca": { // 是否加载 Loca， 缺省不加载
+            "version": '2.0.0' // Loca 版本，缺省 1.3.2
+          },
+        }).then((AMap) => {
+      setTimeout(() => {
+        var that = this
+        this.map = new AMap.Map('mapContainer', {
+          resizeEnable: true,
+          zoom: 10,
+          zoomEnable: this.zoomEnable,
+          dragEnable: this.dragEnable,
+        })
+        this.map.on('click', function(e) {
+          if (this.status) {
+            var marker = new AMap.Marker({
+              position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat
+                .getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            })
+            that.map.remove(that.markers)
+            that.$emit('marker', e)
+            that.markers.push(marker)
+            // 将创建的点标记添加到已有的地图实例：
+            that.map.add(marker)
+          }
+        })
+        if(this.warehousePositioning.lat && this.warehousePositioning.lng){
+            this.map.setCenter([this.warehousePositioning.lat,this.warehousePositioning.lng])
+        }
+        this.marker = new AMap.Marker({
+          icon: new AMap.Icon({
+            size: new AMap.Size(0, 0),
+            image: image,
+          }),
+          map: that.map,
+        })
+        AMap.plugin(
+          ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder', 'AMap.DistrictSearch'],
+          function() {
+            var autocomplete = new AMap.AutoComplete({
+              input: 'searchValue',
+            })
+            var placeSearch = new AMap.PlaceSearch({
+              city: that.acode,
+              citylimit: true,
+              pageSize: 1,
+              pageIndex: 1,
+              map: that.map,
+            })
+            var districtSearch = new AMap.DistrictSearch({
+              subdistrict: 1,
+              level: 'city',
+              showbiz: false,
+            });
+            autocomplete.on( 'select', function(e) {
+              that.marker.setMap(that.map)
+              if (e.poi.location) {
+                placeSearch.search() // 关键字查询查询
+                that.marker.setPosition(e.poi.location)
+                geocoder.getAddress(e.poi.location, function(status, result) {
+                  console.log(e.poi.location, "klokolkjolk")
+                  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.poi.location.lat
+                    obj.lng = e.poi.location.lng
+                    that.$emit('searchAddress', obj)
+                  } else {
+                    that.$emit('searchAddress', '')
+                  }
+                  that.map.setFitView()
+                })
+              } else {
+                districtSearch.search(e.poi.name, (status, result1) => {
+                  if (status == 'complete') {
+                    that.marker.setPosition(result1.districtList[0].center)
+                    geocoder.getAddress(result1.districtList[0].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 = result1.districtList[0].center.lat
+                        obj.lng = result1.districtList[0].center.lng
+                        that.$emit('searchAddress', obj)
+                      } else {
+                        that.$emit('searchAddress', '')
+                      }
+                      that.map.setFitView()
+                    })
+
+
+                  }
+                })
+              }
+            })
+            // 经纬度
+            var geocoder = new AMap.Geocoder({
+              radius: 1000,
+            })
+            that.map.on('moveend', function(e) {
+              //地图变动之后需要重新赋值省市区，未完成
+              that.center = that.map.getCenter(); //获取当前地图中心位置
+              console.log(that.center)
+              that.center.lat = Number(that.center.lat.toFixed(3))
+              that.center.lng = Number(that.center.lng.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('zoomend', function() {
+              //地图变动之后需要重新赋值省市区，未完成
+              // this.zoom = map.getZoom(); //获取当前地图级别
+              that.center = that.map.getCenter(); //获取当前地图中心位置
+              console.log(that.center)
+              that.center.lat = Number(that.center.lat.toFixed(3))
+              that.center.lng = Number(that.center.lng.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', '')
+                }
+              })
+            });
+            // 根据坐标点定位,获取地址的详细信息
+            if (that.position) {
+              that.marker.setMap(that.map)
+              that.marker.setPosition(that.position)
+              geocoder.getAddress(that.position, function(status, result) {
+                if (status === 'complete') {
+                  var obj = {}
+                  obj.formattedAddress = result.regeocode.formattedAddress
+                  obj.areacode = result.regeocode.addressComponent.adcode
+                  that.address = result.regeocode.formattedAddress
+                  that.$emit('positionAddress', obj)
+                  that.province = result.regeocode.addressComponent.province
+                  that.city = result.regeocode.addressComponent.city
+                  that.district = result.regeocode.addressComponent.district
+                }
+              })
+              that.map.setFitView()
+            } else {
+              return false
+            }
+          }
+        )
+      }, 500)
+      this.loadmap()
+        // this.loadmap()
+        }).catch(e => {
+          console.log(e);
+        })
+      }
+    },
+    methods: {
+       clearVal () {
+       this.address = ''
+       this.center=''
+        var status = {
+          zoomEnable: true,
+          dragEnable: true,
+        }
+        this.map.setStatus(status)
+        this.loadmap()
+    },
+      positions() {
+        this.status = false
+        var status = {
+          zoomEnable: false,
+          dragEnable: false,
+        }
+        this.map.setStatus(status)
+        this.loadmap()
+        let _data = []
+        _data.push(this.province)
+        _data.push(this.city)
+        _data.push(this.district)
+        _data.push(this.address)
+        _data.push(this.type)
+        this.$emit('addressListen', _data)
+      },
+      anewselect() {
+        this.status = true
+        var status = {
+          zoomEnable: true,
+          dragEnable: true,
+        }
+
+        this.map.setStatus(status)
+        this.loadmap()
+      },
+      loadmap(val) {
+        let params = val
+        var that = this // 插件
+        for (var j = 0, k = that.polygons.length; j < k; j++) {
+          that.polygons[j].setMap(null)
+        }
+        AMap.plugin(['AMap.DistrictSearch', 'AMap.Polygon'], function() {
+          // 标注
+          var opts = {
+            subdistrict: 1,
+            extensions: 'all',
+            showbiz: false,
+          }
+          var district = new AMap.DistrictSearch(opts) // 注意：需要使用插件同步下发功能才能这样直接使用
+          function getData(data) {
+            console.log(data)
+            that.$emit('selectedAddress', data)
+            // 清除地图上的所有覆盖物
+            that.areacode = data.citycode
+            var bounds = data.boundaries
+            if (data.level === 'country') {
+              that.provinces = data.districtList
+              that.citys = []
+              that.districts = []
+            } else if (data.level === 'province') {
+              that.map.remove(that.marker)
+              that.citys = data.districtList
+              that.districts = []
+              that.address = ''
+            } else if (data.level === 'city') {
+              that.districts = data.districtList
+            }
+            if (data.level === 'country' && bounds) {
+              return false
+            } else {
+              for (var i = 0, l = bounds.length; i < l; i++) {
+                var polygon = new AMap.Polygon({
+                  map: that.map,
+                  strokeWeight: 1,
+                  strokeColor: '#CC66CC',
+                  fillColor: '#CCF3FF',
+                  fillOpacity: 0.5,
+                  path: bounds[i],
+                })
+                that.polygons.push(polygon)
+              }
+              that.map.setFitView()
+            }
+          }
+          let sear = val ? params : '中国'
+          district.search(sear, function(status, result) {
+            if (status === 'complete') {
+              getData(result.districtList[0])
+            }
+          })
+        })
+      },
+      selectP(val) {
+        this.province = CodeToText[val]
+        if (this.status) {
+          this.$emit('provinceChange', val)
+          this.loadmap(val)
+          this.city = ''
+          this.district = ''
+        }
+      },
+      selectC(val) {
+        console.log(val)
+        if (this.status) {
+          this.loadmap(val)
+          this.district = ''
+        }
+      },
+      selectD(val) {
+        this.district = CodeToText[val]
+        if (this.status) {
+          this.loadmap(val)
+        }
+      },
+      submit() {
+        let _data = []
+        _data.push(this.province)
+        _data.push(this.city)
+        _data.push(this.district)
+        _data.push(this.address)
+        _data.push(this.type)
+        _data.push(this.center)
+        this.$emit('addressListen', _data)
+        this.$parent.blurMap()
+        console.log("submit")
+      }
+    },
+  }
+</script>

src/views/warehousenew/warehouseManagementList.vue

@@ -250,7 +250,7 @@
     deletewarehouse,
     postInWeight,
   } from '@/model/warehouse/index'
-  import mapDrag from '@/components/mapdrag/mapdrag'
+  import mapDrag from '@/components/mapdrag/warehouseMap'
   import {
     downloadFile
   } from '@/utils/batchDown'