添加经纬度选择

quanyawei

2024-01-10 635816d68e5f45e8c144beb955e1a698a69d6829

添加经纬度选择

 src/views/toCarryOutLegislativeReforms/components/locationMap.vue

@@ -23,8 +23,25 @@
            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>
        </div>
        <div id="mapd" />
      </div>
@@ -45,7 +62,8 @@
      marker: null,
      placeSearchName: null,
      mapPlaceSearch: null,
      position: []
      position: [],
      positionInput: ''
    }
  },
  mounted () {
@@ -82,20 +100,26 @@
        let autoComplete = new AMap.Autocomplete(autoOptions)
        AMap.event.addListener(autoComplete, 'select', function (e) {
          that.map.clearMap()
          that.mapPlaceSearch.search(e.poi.name)
          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.name
          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)
@@ -109,6 +133,7 @@
          map: map,
          position: that.$parent.position
        })
        that.positionInput = that.$parent.position.join(',')
        that.marker.setMap(map)
        that.map.setCenter(that.$parent.position)
        that.marker.setAnimation('AMAP_ANIMATION_BOUNCE')
@@ -121,12 +146,33 @@
        geocoder.getAddress(position, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            this.placeSearchName = result.regeocode.formattedAddress
            document.getElementById('tipinput').value = result.regeocode.formattedAddress
          }
        })
      })
    },
    search () {
      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()
@@ -147,6 +193,7 @@
    position: relative;
    .searchBox{
      position: absolute;
      display: flex;
      z-index: 100;
       width: 100%;
    }