vue3 高德地图搜索

效果

 input 输入：

                  <el-input
                @input='autoInput'
                :disabled="form.city == ''"
                v-model='form.address'
                placeholder='请输入工作地点'
              />

div 容器

        <div id='container'></div>

css 

#container {
  padding: 0px;
  margin: 0px;
  width: 350px;
  height: 220px;
}

js 

        // 初始化    
function autoInput(data) {
      AMapLoader.load({
    // 高德key，自己申请
        key: 'xxxxxxx',
        version: '2.0'
      }).then((AMap) => {
        // input 输入的值
        var keywords = form.address
        // 加载高德插件
        AMap.plugin(['AMap.AutoComplete', 'AMap.PlaceSearch'], function () {
        // 这里看文档去
          var autoOption = {
            city: form.city ?? '',
            pageSize: 99,
            pageIndex: 1,
            datatype: 'poi',
            extensions: "all",
            autoFitView: true,
            citylimit: true
          }
          var placeSearch = new AMap.PlaceSearch(autoOption)
          placeSearch.search(keywords, function (status, result) {
            if (result.info == 'OK') {
              resultList.value = result.poiList.pois
            }
          })
          // 搜索完信息自己去渲染在页面里边
        })
      })
    }

获取完搜索的列表，点击列表某条初始化地图，点击事件自己写

    function handleClick(val) {
      AMapLoader.load({
        key: 'xxxxx', // 开发者Key必填
        version: '2.0'
      }).then((AMap) => {
        const map = new AMap.Map('container', {
          //设置地图容器id
          resizeEnable: true,
           // 点击时传过来的经纬度
          center: [val.location.lng, val.location.lat],
          zoomEnable: false,
            // 视口保持为中心
          autoFitView: true,
          dragEnable: false,
          zoom: [2, 22] //初始化地图级别
        })

        AMap.plugin(['AMap.PlaceSearch'], function () {
          var placeSearch = new AMap.PlaceSearch({
            map
          })

          select(val)

          function select(val) {
               // 自定义点
            var circle = new AMap.Circle({
              center: new AMap.LngLat(val?.location?.lng ?? '', val?.location?.lat ?? ''), // 圆心位置
              radius: 800,
              autoFitView: true,
              strokeColor: '#6C77F9',
              strokeOpacity: 0,
              strokeWeight: 0,
              fillColor: '#6C77F9',
              fillOpacity: 0.3
            })
            placeSearch.search(val?.name ?? '', ()=> {
              // 注：获取坑货高德搜索完自己创建的标点覆盖物
              var overlays = map.getAllOverlays()
              // 移除点，坑我好久
              map.remove(overlays)
              // placeSearch.render.markerList.clear()
              // 添加自定义标点(清除完再添加)
              map.add(circle)

              map.setFitView()
            })
          }
        })
      })
    }

撒花，撒花，代码没有处理，着急写，勿喷