2021-08-04

需求没变，因为UIMap不支持详细地址显示，所以修改成高德地图原生API方法实现，代码如下

<template>
  <div class="map-box" v-if="flag">
    <div id="container" />
    <div class="map-search-box">
      <div class="search-info">
        <div class="input-item">
          <div class="input-item-prepend">
            <span class="input-item-text" style="width:8rem;">请输入关键字</span>
          </div>
          <input id="tipinput" type="text">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  inject: ['reload'],
  props: ['position'],
  data() {
    return {
      flag: true,
      map: null,
      center: []
    }
  },
  created() {
    const self = this
    setTimeout(() => {
      this.map = new AMap.Map('container', {
        city: '全国',
        cityLimit: false,
        zoom: 13,
        resizeEnable: true
      })
      // 为地图注册click事件获取鼠标点击出的经纬度坐标
      this.map.on('click', (e) => {
        this.getFormatAddress([e.lnglat.getLng(), e.lnglat.getLat()])
        this.setMarker([e.lnglat.getLng(), e.lnglat.getLat()])
      })
      // 输入提示
      var auto = new AMap.Autocomplete({
        input: 'tipinput',
        city: '全国',
        cityLimit: false
      })
      // 获取自动补全地址
      AMap.event.addListener(auto, 'select', select)// 注册监听，当选中某条记录时会触发
      function select(e) {
        if (!e.poi.location) {
          self.$message.error('请选择详细地址，不要直接搜索省市名称')
          return false
        } else if (e.poi && e.poi.location) {
          const poi = [e.poi.location.lng, e.poi.location.lat]
          self.map.setZoom(13)
          self.map.setCenter(poi)
          self.setMarker(poi)
        }
      }
      this.getPosition()
    }, 200)
  },
  methods: {
    getPosition() {
      const self = this
      AMap.plugin('AMap.Geolocation', () => {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认：5s
          buttonPosition: 'LB', // 定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点

        })
        self.map.addControl(geolocation)
        if (!self.position[0]) {
          geolocation.getCurrentPosition(function(status, result) {
            if (status == 'complete') {
              onComplete(result)
            } else {
              onError(result)
            }
          })
        } else {
          self.setMarker(self.position)
        }
      })
      // 解析定位结果
      function onComplete(data) {
        self.setMarker([data.position.lng, data.position.lat])
      }
      // 解析定位错误信息
      function onError(data) {
        self.$message.error(data.message)
        return false
      }
    },
    getFormatAddress(poi) {
      var geocoder = new AMap.Geocoder({
        city: '全国',
        cityLimit: false,
        radius: 1000,
        extensions: 'all'
      })
      geocoder.getAddress(poi, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
          geocoder_CallBack(result)
        }
      })
      function geocoder_CallBack(data) {
        var address = data.regeocode.formattedAddress // 返回地址描述
        document.getElementById('tipinput').value = address
      }
      // this.map.setFitView()
    },
    setMarker(poi) {
      this.map.clearMap() // 清除地图上所有覆盖物
      var marker = new AMap.Marker({
        position: poi
      })
      this.map.setCenter(poi)
      this.map.add(marker)
      this.$emit('position', poi)
    }
  }
}
</script>
<style scoped>
  #container {
    width: 100%;
    min-height: 400px;
  }
  .map-box{
    position: relative;
  }
  .map-search-box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 54px;
  }
  .search-info {
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: .25rem;
    width: 70%;
  }
</style>
<style>
.amap-sug-result{
  z-index: 9999 !important;
}
</style>

默认定位到自己所在位置

可以搜索地点进行定位，或者点选定位

反显定位

<template>
  <div
    v-if="flag"
    class="amap-page-container"
  > <el-amap-search-box
      class="search-box"
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    />
    <el-amap
      ref="mapRef"
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      class="amap-demo"
      :plugin="plugin"
      :events="events"
    >
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="'marker' + index"
        :position="marker"
      />
    </el-amap>
    <div v-if="loaded" class="toolbar">
      <!--      position: [{{ lng }}, {{ lat }}] address: {{ address }}-->
    </div>
    <div v-else>正在定位</div>
  </div>
</template>

<script>
// import { AMapManager } from 'vue-amap'
// const amapManager = new AMapManager()
export default {
  inject: ['reload'],
  props: ['position'],
  data: function() {
    const self = this
    return {
      map: null,
      flag: true,
      markers: [
      ],
      searchOption: {
        city: '济南',
        citylimit: false
      },
      zoom: 12,
      loaded: false,
      center: [121.59996, 31.197646],
      plugin: [
        {
          pName: 'Marker',
          events: {
            init(o) {
              if (self.position[0] && self.position[1]) {
                // const currentMap = self.$refs.mapRef.$amap
                // // 创建一个 Marker 实例：
                // var marker = new AMap.Marker({
                //   position: self.position // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                // })
                // currentMap.add(marker)
                self.markers = []
                self.markers.push(self.position)
                var geocoder = new AMap.Geocoder({
                  radius: 1000,
                  extensions: 'all'
                })
                self.center = self.position
                geocoder.getAddress(self.center, function(status, result) { // 根据坐标获取位置
                  if (status === 'complete' && result.info === 'OK') {
                    self.input = result.regeocode.formattedAddress
                    document.querySelector('.search-box-wrapper input').value = self.input
                  }
                })
                self.loaded = true
                self.$nextTick()
              }
            }
          }
        },
        {
          showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
          pName: 'Geolocation',
          events: {
            init(o) {
              if (!self.position[0] || !self.position[1]) {
                // o 是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    self.lng = result.position.lng
                    self.lat = result.position.lat
                    self.center = [self.lng, self.lat]
                    self.markers = []
                    self.markers.push(self.center)
                    self.address = result.formattedAddress
                    self.loaded = true
                    self.$nextTick()
                  }
                })
              }
            },
            complete(o) {
              if (o.info == 'SUCCESS') {
                self.lng = o.position.lng
                self.lat = o.position.lat
                self.center = [self.lng, self.lat]
                self.markers = []
                self.markers.push(self.center)
                self.$emit('position', self.markers[0])
              }
            }
          }
        }
      ],
      address: '',
      events: {
        click(e) {
          // eslint-disable-next-line no-undef
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          })
          self.center = [e.lnglat.lng, e.lnglat.lat]
          self.markers = []
          self.markers.push(self.center)
          geocoder.getAddress(self.center, function(status, result) { // 根据坐标获取位置
            if (status === 'complete' && result.info === 'OK') {
              self.input = result.regeocode.formattedAddress
              // const marker1 = new AMap.Marker({
              //   position: self.center // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              // })
              // currentMap.add(marker1)
              document.querySelector('.search-box-wrapper input').value = self.input
              self.$emit('position', self.markers[0])
            }
          })
        }
      },
      lng: 0,
      lat: 0
    }
  },
  watch: {
    position: function(newval) {
      this.reload()
    },
    address: {
      handler: function(val, oldVal) {
        this.address = val
        this.$emit('sendAddress', this.address)
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    clearMarker() {
      this.reload()
    },
    onSearchResult(pois) {
      this.input = document.querySelector('.search-box-wrapper input').value
      this.center = [pois[0].lng, pois[0].lat] // 选择了第一个值
      this.markers = [] // 标记点先清空
      this.markers.push([pois[0].lng, pois[0].lat]) // 把搜索的位置的第一个值存入标记中并显示标记点
      this.$emit('position', this.center)
    }
    // onSearchResult(pois) {
    //   let latSum = 0
    //   let lngSum = 0
    //   if (pois.length > 0) {
    //     console.log(pois)
    //     pois.forEach(poi => {
    //       const { lng, lat } = poi
    //       lngSum += lng
    //       latSum += lat
    //       this.markers.push([poi.lng, poi.lat])
    //     })
    //     const mapcenter = {
    //       lng: lngSum / pois.length,
    //       lat: latSum / pois.length
    //     }
    //     this.center = [mapcenter.lng, mapcenter.lat]
    //   }
    // }
  }
}
</script>
<style>
.amap-page-container{
  width: 100%;
  height: 400px;
  margin-bottom: 50px;
}
.el-vue-search-box-container {
  position: relative;
  width: 60% !important;
  height: 32px !important;
  line-height:32px !important;;
  background: #fff;
  box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
  border-radius: 2px 3px 3px 2px;
  z-index: 10;
}
.search-box {
  position: absolute;
  top: 35px;
  left: 5px;
  height:32px;
  line-height:32px;
}

.amap-page-container {
  position: relative;
}
</style>