用高德地图实现点击地图添加标记点，获取该点的经纬度，详细地址，通过输入框进行地址搜索自动定位到输入框地址

用高德地图实现点击地图添加标记点，获取该点的经纬度，详细地址，通过输入框进行地址搜索自动定位到输入框地址

<template>
  <div class="wrap">
    <div>
      <div>详细地址:{{ addressKeyWord }}</div>
      <div>经纬度:{{ lnglat }}</div>
      <div>备注地点名:{{ locationName }}</div>
    </div>
    <div id="container"></div>
    <a-input
      style="width: 199px"
      v-model="addressKeyWord"
      id="pickerInput"
      placeholder="请输入关键字"
    />
  </div>
</template>
<script>
export default {
  data () {
    return {
      lnglat: [116.397428, 39.90923],
      addressKeyWord: "",
      locationName: ''
    }
  },
  mounted () {
    this.handleInitMap()
  },
  methods: {
    handleInitMap () {
      this.map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 14, //初始化地图层级
        center: this.lnglat//初始化地图中心点
      })
      this.handleAddMarker()
      this.map.on('click', (ev) => {
        // 触发事件的地理坐标，AMap.LngLat 类型
        var lnglat = ev.lnglat
        console.log(ev, lnglat)
        this.lnglat = [lnglat.lng, lnglat.lat]
        this.map.clearMap()
        this.handleAddMarker()
        this.map.setCenter(this.lnglat)
        // 将经纬度坐标转化为详细地址
        AMap.plugin('AMap.Geocoder', () => {
          var geocoder = new AMap.Geocoder({
            extensions: 'all'
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          })

          var lnglat1 = [lnglat.lng, lnglat.lat]

          geocoder.getAddress(lnglat1, (status, result) => {
            if (status === 'complete' && result.info === 'OK') {
              // result为对应的地理位置详细信息
              console.log(result, '详细地址')
              this.addressKeyWord = result.regeocode.formattedAddress
              this.locationName = result.regeocode.pois[0].name
            }
          })
        })
      })
      //加载BasicControl，loadUI的路径参数为模块名中 'ui/' 之后的部分
      AMapUI.loadUI(['control/BasicControl'], (BasicControl) => {
        //缩放控件
        this.map.addControl(new BasicControl.Zoom({
          position: 'rb', //left top，左上角
          showZoomNum: false //显示zoom值
        }))
      })
      //加载PoiPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
      AMapUI.loadUI(['misc/PoiPicker'], (PoiPicker) => {
        var poiPicker = new PoiPicker({
          input: 'pickerInput' //输入框id
        })
        //监听poi选中信息
        poiPicker.on('poiPicked', (poiResult) => {
          //用户选中的poi点信息
          console.log(poiResult, "poiResult")
          let lnglat = poiResult.item.location
          this.addressKeyWord = poiResult.item.name
          this.lnglat = [lnglat.lng, lnglat.lat]
          this.map.clearMap()
          this.handleAddMarker()
          this.map.setCenter(this.lnglat)
        })
      })
    },
    handleAddMarker () {
      // 构造点标记
      const marker = new AMap.Marker({
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: this.lnglat
      })
      // 构造矢量圆形
      const circle = new AMap.Circle({
        center: new AMap.LngLat(this.lnglat[0], this.lnglat[1]), // 圆心位置
        radius: 1000,  //半径
        strokeColor: "#1890ff",  //线颜色
        strokeOpacity: 1,  //线透明度
        strokeWeight: 3,  //线粗细度
        fillColor: "#1890ff",  //填充颜色
        fillOpacity: 0.35 //填充透明度
      })

      // 将以上覆盖物添加到地图上
      // 单独将点标记添加到地图上
      this.map.add(marker)
      // add方法可以传入一个覆盖物数组，将点标记和矢量圆同时添加到地图上
      this.map.add([marker, circle])
    }
  },
};
</script>
<style lang="scss" scoped>
#container {
  width: 100%;
  height: 500px;
}
.wrap {
  position: relative;
  #pickerInput {
    position: absolute;
    right: 0;
    top: 50px;
    z-index: 99999;
  }
}
</style>