学会了一个小功能，我们庆祝一下【高德API-输入提示和POI搜索】

JYM，公司领导又给了我提升自己的机会。（把不会的整明白是不是就是提升，盘它）

需求确认

第一版需求：我们之前的交互是直接地图找到大概的位置之后点击，通过点击地图获取对应的坐标信息，然后发送给后端。
第二版需求：需要一个输入框，能搜索对应的位置，使点击的位置更加精确。然后我就去官网找了输入提示和POI搜索的方法，然后就草草提交了。（当时要的是比较着急的，我对这块也不是特别熟悉，也就这样发上去了）。
第三版需求：点击地图上的点位直接将对应的点位发送给后端。
我听到之后觉得这不是很简单嘛...，因为我隐约记得之前好像看到过类似的文章好像是蛮简单的。就这样，我满口答应了下来。

开发阶段

启动项目后我进去看了一眼傻了，输入之后的弹窗提示没了【如下图】，当时就在想：天塌了呀。看了代码没有改动，但就是出不来，我慌了呀，网上各种找文章（忘记花了多久了），反正最后可算是让我找到了参考文章# 前端使用高德api的AMap.Autocomplete无效，使用AMap.Autocomplete报错赶在下班前开发出了这个功能，还输出了此篇文章！

代码部分

前置准备
你要先去高德的api网站上注册账号然后创建创建key(默认大家已经有了)。
第一步：在html中引入

js 复制代码

//引入密钥
<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode:'你的密钥',
  }
</script>
//引入key
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=Map3D,AMap.DistrictSearch,AMap.Heatmap"></script>

第二步：封装方法

js 复制代码

// 展示对应的输入框查询位置
    searchAddress(){
      let that = this;
      //输入提示
      AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],()=>{
        let autoOptions = {
            city: "深圳",
            input: "keyword"
        };
        let auto = new AMap.Autocomplete(autoOptions);
        let placeSearch = new AMap.PlaceSearch({
            map: this.map
        });  //构造地点查询类
        const select=(e)=> {
          placeSearch.setCity(e.poi.adcode);
          placeSearch.search(e.poi.name);  //关键字查询查询
        }
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
        AMap.event.addListener(placeSearch, 'markerClick', function (e) {
          let lnglat=e.event.lnglat;
          let info = {
              lng: lnglat.lng,
              lat: lnglat.lat,
            };
          that.$emit("getLngLat", info);//传递给父级进行展示
          //点击点位后清除所有点位然后在对应位置创建一个自定义点位
          that.addmMrkerAmap([lnglat.lng,lnglat.lat]);
        })
      })
    }

addmMrkerAmap这个方法你们可以不用管的哈。

效果展示

存在的问题

JYM，这玩意是有每日上线的呀

不知道咋整了，剩下的交给公司来解决吧

结束

🎉庆祝我在前端的技术方面又有了一点点的前进吧！🥳

来日方长，继续努力