• 高德地图搜索功能以及清除搜索结果maker


    第一次写文章,写得不好各位看官见谅~
    (pσ_σ)P
    首先这是一个vue里面的项目,高德地图api是直接CDN进来的,所以使用了global来调用,默认已经初始化了一个地图,为了实现一个输入框搜索功能和将搜索的结果清除掉,直观表现就是将搜索出来的点清除掉,话不多说直接上代码

    
      // AMap.Autocomplete是输入提示插件,详情参考https://lbs.amap.com/api/javascript-api/reference/search#m_AMap.Autocomplete
      global.AMap.plugin('AMap.Autocomplete', () => {
        let autoOptions = {
          city: this.shopDatadetail.city,
          input: 'addressInput' // 输入框ID
        }
        let autoComplete = new global.AMap.Autocomplete(autoOptions)
        // select为输入框提示之后的选择事件,监听事件用法详情参考https://lbs.amap.com/api/javascript-api/reference/event/
        global.AMap.event.addListener(autoComplete, 'select', e => {
          this.chooseAddressSelect = e // e为回调函数返回的下拉框选择的参数
          this.accuratePos = e.poi.name // accuratePos为输入框v-model绑定的值
          global.AMap.service('AMap.PlaceSearch', () => {
            let searchOptions = {
              city: '全国',
              map: this.map
            }
            let searchRes = new global.AMap.PlaceSearch(searchOptions)
            // 搜索服务,详情参考https://lbs.amap.com/api/javascript-api/reference/search#m_AMap.PlaceSearch
            searchRes.search(this.chooseAddressSelect.poi.name, () => {
              // 其实这个地方是我最主要讲的,请往下看
              searchRes.render.markerList.clear() // 这个为清除搜索结果的点,不想清除注释即可
              console.log('搜索完成打印', searchRes) // searchRes为搜索的结果
            })
          })
        })
      })
    
    

    接上,在高德地图的api中,搜索服务有一个clear方法,但是我使用了没有用,网上找了一下发现好像不是我一个人遇到了这个问题,但是也有相应的解决方法,即searchRes.render.markerList.clear(),我一开始是这样写的

    
            let searchRes = new global.AMap.PlaceSearch(searchOptions)
            searchRes.search(this.chooseAddressSelect.poi.name)
            searchRes.render.markerList.clear()
    
    

    但是没有用,我看其他人好像都是我这样使用的,然后去看一下文档发现search有一个回调函数就尝试在回调函数里面使用这个,结果成功了!至于为什么会这样子我也不知道为什么......有知道的大佬可以为我解答一波,踩坑较久,还是实力不行,顺便吐槽一下高德api,告辞!
    PS:文中可能没有什么精华点,很多都是详情参考,一来我的确是实力可能还没有到能解答的地步,二是第一次写真的真的不知道怎么写,三是我建议多看文档才能发现一些解决的办法。

    原文地址:https://segmentfault.com/a/1190000016905648

  • 相关阅读:
    POLARDB与其他关系型数据库对比
    美团关于分布式ID实践方案
    CRM、DMP、CDP概念解析
    TIDB简介
    美团关于分布式ID实践方案细节
    美团在TIDB方面的实践
    设计模式之桥梁模式
    【转】Hibernate和IBatis对比
    Eclipse插件安装
    【转】揭开正则表达式的神秘面纱
  • 原文地址:https://www.cnblogs.com/datiangou/p/10125906.html
Copyright © 2020-2023  润新知