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

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

结束

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

来日方长,继续努力

相关推荐
知识分享小能手20 分钟前
Typescript学习教程,从入门到精通,TypeScript 泛型与类型操作详解(二)(17)
前端·javascript·学习·typescript·jquery·前端网页学习
lineo_1 小时前
抛弃陈旧写法,你的uniapp定义globalData的正确姿势(setup语法糖)
前端·javascript
spionbo1 小时前
Vue 结合 D3 实现可拖拽拓扑图的技术方案及具体应用实例解析
前端·javascript
一轮大月亮1 小时前
JavaScript es6 语法 map().filter() 链式调用,语法解析 和常见demo
开发语言·javascript·es6
JYeontu1 小时前
实现一个3D轮播图
前端·javascript·css
英宋1 小时前
ck-editor5的研究(1):快速把 CKEditor5 集成到 nuxt 中
前端·javascript
挽淚1 小时前
ES6新特性:解锁编程新技能
javascript
工业互联网专业1 小时前
基于Android的记录生活APP_springboot+vue
android·vue.js·spring boot·毕业设计·源码·课程设计·记录生活app
YYsuni1 小时前
记 Array vs Object 性能表现
前端·javascript
轻语呢喃1 小时前
大厂面试(三):JavaScript中两数相加的精度陷阱
javascript·面试