vue调用高德地图实现点击地图获取地点

一、获取key（百度）
二、main.js中挂载

三、页面使用

 <div class="amap-page-container">
      <el-amap-search-box
        :search-option="searchOption"
        :on-search-result="onSearchResult"
        class="search-box"
      />
      <el-amap
        ref="map"
        :amap-manager="amapManager"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        vid="amapDemo"
        class="amap-demo"
      >
        <el-amap-marker :position="center"/>
      </el-amap>
    </div>

基本设置（data的return里）：

标点获取位置插件和定位插件（同样在data的return里）：

plugin: [
        {
          pName: 'Geocoder', // 使用AMap.Geocoder插件
          events: {
            init(o) {
              Geocoder = o // o 则是AMap.Geocoder的实例 对外部的Geocoder变量进行赋值，在任何地方就都可以使用了
              // self.center 具体坐标 （数组格式） ，function 回调函数
              o.getAddress(self.center, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  // result.regeocode.formattedAddress就是具体位置
                  self.input = result.regeocode.formattedAddress
                  document.querySelector('.search-box-wrapper input').value =
                        self.input
                }
              })
            }
          }
        },
        {
          showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
          pName: 'Geolocation', // AMap-Geolocation 定位插件
          events: {
            init(o) {
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  const lng = result.position.lng
                  const lat = result.position.lat
                  self.center = [lng, lat]
                  self.loaded = true
                  self.zoom = 18
                  self.$nextTick()
                }
              })
            }
          }
        }
      ]

三、模糊查询

 methods: {
    onSearchResult(pois) {
      this.input = document.querySelector('.search-box-wrapper input').value
      // 这边类似模糊查询 会返回一个数组，我就直接取第一个值了。
      this.center = [pois[0].lng, pois[0].lat]
    },

完成。

但是有个小插曲，之前是打开控制台的时候才能进行拖动和缩放，关掉控制台后就失灵了，查询和定位均没有问题。现在正常了，但是至于解决方法，我自己也不知道它是怎么好的😂很尴尬