高德地图搜索功能以及清除搜索结果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
高德地图搜索功能以及清除搜索结果maker的更多相关文章
- CSS选择器实现搜索功能 驱动过滤搜索技术
一.CSS选择器可以用来实现搜索功能 CSS选择器可以用来实现搜索功能. 作者以前提过CSS3的选择器结合表单元素可以用来控制元素的显隐,这里,类似的,还是CSS3的选择器,用来过滤和搜索页面元素. ...
- Windows XP搜索功能 "包含文字" 搜索不到内容的解决办法
Windows开始菜单 -- 运行 -- regedit -- 确定,编辑注册表 HKEY_LOCAL_MACHINE\SYSTEM\ControlSet\Control\ContentIndex 右 ...
- 网页搜索功能 多表搜索sql
SELECT ID, Title, FromTableFROM (SELECT ID, ArticleName AS Title, 'Article' AS FromTable FROM ...
- 011.Adding Search to an ASP.NET Core MVC app --【给程序添加搜索功能】
Adding Search to an ASP.NET Core MVC app 给程序添加搜索功能 2017-3-7 7 分钟阅读时长 作者 本文内容 1.Adding Search by genr ...
- 原生javascript实现 下拉框搜索功能
由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...
- 如何使用 Lucene 做网站高亮搜索功能?
现在基本上所有网站都支持搜索功能,现在搜索的工具有很多,比如Solr.Elasticsearch,它们都是基于 Lucene 实现的,各有各的使用场景.Lucene 比较灵活,中小型项目中使用的比较多 ...
- 第三百六十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能
第三百六十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能 Django实现搜索功能 1.在Django配置搜索结果页的路由映 ...
- vue实现搜索功能
vue实现搜索功能 template 部分 <!-- 搜索页面 --> <template> <div> <div class="goback&qu ...
- 商城06——solr索引库搭建&solr搜索功能实现&图片显示问题解决
1. 课程计划 1.搜索工程的搭建 2.linux下solr服务的搭建 3.Solrj使用测试 4.把数据库中的数据导入索引库 5.搜索功能的实现 2. 搜索工程搭建 要实现搜索功能,需要搭建 ...
随机推荐
- jquery扩展方法(表单数据格式化为json对象)
1.jquery扩展方法(表单数据格式化为json对象) <script type="text/javascript"> // 将表单数据序列化为一个json对象,例如 ...
- JPA学习(三、JPA_API)
框架学习之JPA(三) JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中 ...
- tf.InteractiveSession() 和 tf.Session() 的区别
tf.InteractiveSession():它能让你在运行图的时候,插入一些计算图,这些计算图是由某些操作(operations)构成的.这对于工作在交互式环境中的人们来说非常便利,比如使用IPy ...
- 使用Eigen遇到恶心报错
参考博客:https://www.cnblogs.com/wongyi/p/8734346.html 1. 数据类型报错 /home/wy/workdir/slambook/ch3/useEigen/ ...
- 【canvas学习笔记四】绘制文字
本节我们来学习如何绘制文字. 绘制文字有两个主要的方法: fillText(text, x, y [, maxWidth]) 在x, y位置填充文字text,有一个可选参数maxWidth设置最大绘制 ...
- sqli-labs(28)---原创原创自此一家
0X01构造闭合 ’报错 )报错 其他不报错 那我们猜想是不是')的闭合 ?id=')=('1 返回正确 那么好像猜对了 0X02爆表名 过滤了相连接的union和select ?id= 这里过滤了相 ...
- sqli-labs(11)
基于登录点的注入(小编这里傻逼了 可以直接用group_concat函数绕过显示问题我还在用limit绕过) 0X01这里我们的参数就不是在get的方法里面提交的了 我们遇到了全新的问题 那么该怎么 ...
- 说下Java堆空间结构,及常用的jvm内存分析命令和工具
Java堆空间结构图:http://www.cnblogs.com/SaraMoring/p/5713732.html JVM内存状况查看方法和分析工具: http://blog.csdn.net/n ...
- iOS堆栈内存区别
堆和栈的区别: · 1> 堆空间的内存是动态分配的,一般存放对象,并且需要手动释放内存. · 2> 栈空间的内存由系统自动分配,一般存放局部变量等,不需要手动管理内存. 接下来我将从以下几 ...
- MVC、MVP 和 MVVM
MVC Model–View–Controller 模型:管理应用程序的数据.逻辑和规则 视图:展示数据(可以直接从模型中获取数据) 控制器:接收输入并将其转化成模型和视图的命令 MVP Model– ...