高德地图位置搜索（输入提示）/打点

坑：1.可能是dialog的层级过高，导致一直无法显示，设置结果类.amap-sug-result的z-index大于1024

2.最坑爹的是代码没问题，而是，输入提示的api每日有次数限制，返回信息也没有返回

<template>
  <div>
    <table>
      <tr>
        <td>
          <label>请输入具体地址：</label>
        </td>
      </tr>
      <tr>
        <td>
          <input id="tipinput" />
        </td>
      </tr>
    </table>
    <!-- 地图 -->
    <div :style="`width: ${width};height: ${height}`" id="GDmapContainer"></div>
  </div>
</template>

<script>
// 引入
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  props: {
    width: {
      type: [String],
      default: '100vw',
    },
    height: {
      type: [String],
      default: '100vh',
    },
    viewMode: {
      type: String,
      default: '2D',
    },
    // 初始化地图级别
    zoom: {
      type: Number,
      default: 12,
    },
    center: {
      type: Array,
      default: () => [120.130396, 30.259242],
    }, // 初始化地图中心点位置
    mapStyle: {
      type: String,
      default: '',
    },
    // 是否允许点击
    click: {
      type: Boolean,
      default: false,
    },
    mousemove: {
      type: Boolean,
      default: false,
    },
    dblclick: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      map: null,
      marker: null,
      AMapCoder: null,
      address: '',
      markerList: [],
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 坐标查询位置信息
    clickHandler(e) {
      if (this.marker !== null) {
        // 移除已创建的 marker
        this.map.remove(this.marker)
      }
      console.log(e)
      const x = e.lnglat.getLng()
      const y = e.lnglat.getLat()
      console.log(new AMap.LngLat(x, y))
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(x, y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        offset: new AMap.Pixel(-5, -5),
        anchor: 'bottom-center',
      })
      // 将创建的点标记添加到已有的地图实例：
      this.map.add(this.marker)
      let address
      this.AMapCoder.getAddress(new AMap.LngLat(x, y), (status, result) => {
        if (status === 'complete' && result.regeocode) {
          address = result.regeocode.formattedAddress
          this.$emit('clickHandler', {
            x,
            y,
            address,
          })
        } else {
          console.log('根据经纬度查询地址失败')
        }
      })
    },
     mousemoveHandler(e) {
       this.$emit('mousemoveHandler', e)
     },
     dblclickHandler(e) {
       this.$emit('dblclickHandler', e)
     },

    // 初始化高德map
    initMap() {
      window._AMapSecurityConfig = {
        securityJsCode: 'xxx',
      }
      AMapLoader.load({
        key: 'xxx', // 申请好的Web端开发者Key，首次调用 load 时必填
        // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Geocoder', 'AMap.Autocomplete', 'AMap.PlaceSearch'], 
        // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map('GDmapContainer', {
            // 设置地图容器id
            viewMode: this.viewMode, // 是否为3D地图模式
            zoom: this.zoom, // 初始化地图级别
            center: this.center, // 初始化地图中心点位置
            // 地图颜色
            // mapStyle: 'amap://styles/normal',正常
            mapStyle: this.mapStyle || 'amap://styles/darkblue',//天蓝色
          })

          this.AMapCoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all',
          })
          //输入框连锁
          const autoOptions = {
            input: 'tipinput', // 使用联想输入的input的id
          }
          const autocomplete = new AMap.Autocomplete(autoOptions)
          // 搜索到的下拉结果，会自动显示在amap-sug-result的div中
          
          // 获取搜索结果区域
          // 如果自己的弹窗的层级太大可能导致无法显示，所以要将搜索结果的层级设置高一点
          const xia = document.getElementsByClassName('amap-sug-result')
          for (let i = 0; i < xia.length; i++) {
            const element = xia[i]
            element.style.zIndex = 2500
          }
          const that = this
          AMap.event.addListener(autocomplete, 'select', function (e) {
            const lngLat = [e.poi.location.lng, e.poi.location.lat]
            const x = lngLat[0]
            const y = lngLat[1]
            that.map.setCenter(lngLat)
            if (that.marker !== null) {
              // 移除已创建的 marker
              that.map.remove(that.marker)
            }
            that.marker = new AMap.Marker({
              position: new AMap.LngLat(x, y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              offset: new AMap.Pixel(-5, -5),
              anchor: 'bottom-center',
            })
            // 将创建的点标记添加到已有的地图实例：
            that.map.add(that.marker)
            that.$emit('clickHandler', {
              x,
              y,
            })
          })
          if (this.click) this.map.on('click', this.clickHandler)
          // 双击方法
           if (this.dblclick) this.map.on('dblclick', this.dblclickHandler)
           if (this.mousemove) this.map.on('mousemove', this.mousemoveHandler)
        })
        .catch((err) => {
          throw new Error(err)
        })
    },
  },
}
</script>