fix: 责任单位修改

quanyawei

2024-09-12 293a5597a6823edc5c64372ec41b1024c9f87ee0

 src/views/toCarryOutLegislativeReforms/components/locationMap.vue

@@ -7,25 +7,50 @@
      width="1000px"
      center
      :before-close="close"
      @closed="close"
    >
      <div class="searchBox">
        <el-input
          v-model="placeSearch"
          placeholder="请输入地址"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          />
        </el-input>
      </div>
      <div id="panel" />
      <div
        v-if="visible"
        class="mapBox"
      >
        <div
          class="searchBox"
        >
          <el-input
            id="tipinput"
            v-model="placeSearchName"
            :disabled="$parent.mapType!=='edit'"
            prefix-icon="el-icon-search"
            placeholder="请输入地址"
            class="input-with-select"
            style="margin-right: 10px"
            @keyup.enter.native="searchPlace"
          />
          <el-input
            v-model="positionInput"
            :disabled="$parent.mapType!=='edit'"
            prefix-icon="el-icon-position"
            placeholder="请输入经纬度"
            class="input-with-select"
            style="margin-right: 10px"
            @keyup.enter.native="searchAddress"
          />
          <el-button
            v-if="$parent.mapType==='edit'"
            type="primary"
            @click="search"
          >
            查询
          </el-button>
          <el-button
            v-if="$parent.mapType==='edit'"
            type="primary"
            :disabled="placeSearchName===''"
            @click="close"
          >
            确定
          </el-button>
        </div>
        <div id="mapd" />
      </div>
    </el-dialog>
@@ -41,7 +66,12 @@
    return {
      title: '污染位置',
      map: null,
      placeSearch: null
      geolocation: null,
      marker: null,
      placeSearchName: '',
      mapPlaceSearch: null,
      position: [],
      positionInput: ''
    }
  },
  mounted () {
@@ -61,37 +91,104 @@
        resizeEnable: true,
        zooms: [3, 18],
        zoom: 15,
        center: [120.9781494, 31.4265156]
      })
      this.map = map

      const lnglat = new AMap.LngLat('120.9781494', '31.4265156')
      const marker = new AMap.Marker({
        position: lnglat
      })

      // 设置点标记的动画效果，此处为弹跳效果
      marker.setAnimation('AMAP_ANIMATION_BOUNCE')
      marker.setMap(this.map)
      AMap.service(['AMap.PlaceSearch'], function () {
        // 构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
          pageSize: 5, // 单页显示结果条数
          pageIndex: 1, // 页码
          city: '010', // 兴趣点城市
          citylimit: true, // 是否强制限制在设置的城市内搜索
          map: map, // 展现结果的地图实例
          panel: 'panel', // 结果列表将在此容器中进行展示。
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
      let that = this
      AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
        // 实例化Autocomplete
        let autoOptions = {
          // city 限定城市，默认全国
          city: '全国',
          input: 'tipinput',
        }
        that.mapPlaceSearch = new AMap.PlaceSearch({
          map: map,
        })
        // 关键字查询
        placeSearch.search('北京大学')
        // that.geolocation = new AMap.Geolocation({})
        let autoComplete = new AMap.Autocomplete(autoOptions)
        AMap.event.addListener(autoComplete, 'select', function (e) {
          that.map.clearMap()
          this.position = []
          console.log('eee', e.poi.name)
          console.log('eee', that.placeSearchName)
          that.placeSearchName = e.poi.name
          // that.mapPlaceSearch.search(e.poi.name)
        })
        AMap.event.addListener(that.mapPlaceSearch, 'markerClick', function (e) {
          that.position = [e.data.location.lng, e.data.location.lat]
          that.positionInput = e.data.location.lng + ',' + e.data.location.lat
          this.placeSearchName = e.data.cityname + e.data.adname + e.data.address
          console.log(e)
          console.log(this.placeSearchName)
          document.getElementById('tipinput').value = e.data.cityname + e.data.adname + e.data.address
        })
      })
      if (this.$parent.mapType === 'edit') {
        map.on('click', function (ev) {
          that.map.clearMap()
          that.position = [ev.lnglat.lng, ev.lnglat.lat]
          that.positionInput = ev.lnglat.lng + ',' + ev.lnglat.lat
          that.marker = new AMap.Marker({
            position: that.position,
            offset: new AMap.Pixel(-13, -30)
          })
          that.marker.setMap(map)
          that.getAddress(that.position)
        })
      } else {
        this.map.clearMap()
        that.marker = new AMap.Marker({
          map: map,
          position: that.$parent.position
        })
        that.positionInput = that.toFixed(that.$parent.position[0], 8) + ',' + that.toFixed(that.$parent.position[1], 8)
        that.marker.setMap(map)
        that.map.setCenter(that.$parent.position)
        that.marker.setAnimation('AMAP_ANIMATION_BOUNCE')
        this.placeSearchName = this.$parent.address
      }
    },
    toFixed (str, decimalPlaces) {
      const num = parseFloat(str)
      return num.toFixed(decimalPlaces)
    },
    getAddress (position) {
      AMap.plugin('AMap.Geocoder', () => {
        const geocoder = new AMap.Geocoder({})
        geocoder.getAddress(position, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            this.placeSearchName = result.regeocode.formattedAddress
            document.getElementById('tipinput').value = result.regeocode.formattedAddress
          }
        })
      })
    },
    search () {
      let this_ = this
      console.log('search', this.placeSearchName)
      if (this.positionInput) {
        this.searchAddress()
        return
      }
      if (this.placeSearchName) {
        this.searchPlace(this.placeSearchName)
      }
    },
    searchPlace () {
      this.mapPlaceSearch.search(this.placeSearchName)
    },
    searchAddress () {
      this.map.clearMap()
      this.marker = new AMap.Marker({
        map: this.map,
        position: this.positionInput.split(',')
      })
      this.marker.setMap(this.map)
      this.map.setCenter(this.positionInput.split(','))
      this.getAddress(this.positionInput.split(','))
    },
    close () {
      this.map.destroy()
      this.$emit('addressAndLnt', this.position, this.placeSearchName)
      this.$emit('update:visible', false)
    }
  }
@@ -101,13 +198,17 @@
<style scoped lang="scss">
/deep/.el-dialog__body {
  height: 600px;
  .searchBox {
    margin-bottom: 10px;
  }
  .mapBox {
    width: 100%;
    height: 100%;
    padding-bottom: 30px;
    position: relative;
    .searchBox{
      position: absolute;
      display: flex;
      z-index: 100;
       width: 100%;
    }
  }
}
#mapd {