yiliangyiyun-pc/src/components/mapdrag/mapdrag.vue

<style lang='scss' scoped>
.mapContent {
  position: relative;
  margin-top: 80px;
}
#mapContainer {
  width: 100%;
  height: 300px;
}
#tip {
  position: absolute;
  top: -75px;
}
#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;
  position:absolute;
  top: -35px;
  .address-input{
    width: 400px;
  }
}
</style>

<template>
  <div class="mapContent">
    <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>
     
      <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>
    </div>
    <div class="address" v-if="isShowaddress">
       <el-input
        type="text"
        id="searchValue"
        placeholder="请输入关键字:"
        v-model="address"
        clearable
        class="address-input"
      ></el-input>
    </div>
    
  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
import image from '../../../public/img/ic_locationmarker.jpg'
export default {
  data() {
    return {
      map: null,
      provinces: [],
      province: '',
      districts: [],
      district: '',
      citys: [],
      city: '',
      polygons: [],
      selectedOptions1:[],
      areacode: '',
      address: '',
      objPoint: [],
      markers: [],
      zoomEnable: true,
      dragEnable: true,
      status: true,
    }
  },
  props: ['flagVisible', 'position','selectedOptions','isShowaddress','type'],
  computed: {
    showFlag() {
      return this.flagVisible
    },
  },
  watch: {
    selectedOptions:{
      handler(newValue, oldValue) {
        console.log(CodeToText[newValue[1]])
        this.province=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() {
    // 已载入高德地图API，则直接初始化地图
    if (window.AMap && window.AMapUI) {
      this.initMap()
      // 未载入高德地图API，则先载入API再初始化
    } else {
      await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`)
      await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
      this.initMap()
    }
  },
  mounted() {
      // console.log(this)
    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)
        }
      })
      this.marker = new AMap.Marker({
        icon: new AMap.Icon({
          size: new AMap.Size(36, 44),
          image: image,
        }),
        map: that.map,
      })
      AMap.plugin(
        ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Geocoder'],
        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,
          })
          AMap.event.addListener(autocomplete, 'select', function (e) {
            that.marker.setMap(that.map)
            that.marker.setPosition(e.poi.location)
            placeSearch.search() // 关键字查询查询
            geocoder.getAddress(e.poi.location, 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.poi.location.lat
                obj.lng = e.poi.location.lng
                that.$emit('searchAddress', obj)
              } else {
                that.$emit('searchAddress', '')
              }
            })
            that.map.setFitView()
          })
          // 经纬度
          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.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)
            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()
  },
  methods: {
    positions() {
      this.status = false
      var status = {
        zoomEnable: false,
        dragEnable: false,
      }
      this.map.setStatus(status)
      this.loadmap()
    },
    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) {
      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) {
      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)
      this.$emit('addressListen',_data)
      this.$parent.blurMap()
    }
  },
}
</script>