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

<style lang='scss' scoped>
.mapContent {
  position: relative;
  margin-top: 40px;
}
#mapContainer {
  width: 300px;
  height: 300px;
}
#tip {
  position: absolute;
  top: -60px;
}
#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;
  }
}
</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-input
        type="textarea"
        id="searchValue"
        placeholder="地址"
        v-model="address"
        clearable
      ></el-input>
    </div>
  </div>
</template>

<script>
import image from '../../../public/img/ic_locationmarker.jpg'
export default {
  data() {
    return {
      map: null,
      provinces: [],
      province: '',
      districts: [],
      district: '',
      citys: [],
      city: '',
      polygons: [],
      areacode: '',
      address: '',
      objPoint: [],
      markers: [],
    }
  },
  props: ['flagVisible', 'position'],
  computed: {
    showFlag() {
      return this.flagVisible
    },
  },
  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() {
    setTimeout(() => {
      var that = this
      this.map = new AMap.Map('mapContainer', {
        resizeEnable: true,
        zoom: 10,
      })
      this.map.on('click', function (e) {
        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) {
              console.log(status)
              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: {
    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) {
          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.loadmap(val)
      this.city = ''
      this.district = ''
    },
    selectC(val) {
      this.loadmap(val)
      this.district = ''
    },
    selectD(val) {
      this.loadmap(val)
    },
  },
}
</script>