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

<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'>确定</el-button>
    </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,
        center: '',
      }
    },
    props: ['flagVisible', 'position', 'selectedOptions', 'isShowaddress', 'type'],
    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() {
      // 已载入高德地图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(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,
            });

            AMap.event.addListener(autocomplete, '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(); //获取当前地图中心位置
              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('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)
              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()
        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>