学会了一个小功能,我们庆祝一下【高德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,这玩意是有每日上线的呀

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

结束

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

来日方长,继续努力

相关推荐
阿珊和她的猫1 小时前
钩子函数和参数:Vue组件生命周期中的自定义逻辑
前端·javascript·vue.js
勘察加熊人1 小时前
vue展示graphviz和dot流程图
前端·vue.js·流程图
2501_915373883 小时前
Electron 从零开始:构建你的第一个桌面应用
前端·javascript·electron
贩卖黄昏的熊3 小时前
JavaScript 笔记 --- part8 --- JS进阶 (part3)
前端·javascript·笔记
Enti7c5 小时前
JavaScript 实现输入框的撤销功能
开发语言·javascript·ecmascript
武昌库里写JAVA5 小时前
Java 设计模式
java·vue.js·spring boot·课程设计·宠物管理
每次的天空5 小时前
Android学习总结之GetX库篇(场景运用)
android·javascript·学习
丨丨三戒丶8 小时前
layui轮播图根据设备宽度图片等比例,高度自适应
前端·javascript·layui
24白菜头8 小时前
CSS学习笔记
前端·javascript·css·笔记·学习
程序员小刚9 小时前
基于SpringBoot + Vue 的火车票订票系统
vue.js·spring boot·后端