VUE——Vue-amap实现POI搜索

大致效果：

点击搜索按钮，出现搜索框

        

搜索框里输入文字，自动联想并提示搜索结果，供选择

        

点击某个提示结果，进入详细搜索结果

        

选择想要的结果，搜索结果隐藏，搜索框隐藏，地图中心点变为选择的地方

        

这里使用官方UI里面的misc/PoiPicker

new PoiPicker的时候进行配置，具体配置文档请参照：点击打开链接

组件代码：

JS代码：

监听poiPicked事件，得到返回结果poiResult
poiResult里面的source字段会对操作加以说明  若是点击提示文字时  source为suggest,否则为search，由此进行判断，若为search，则表示搜索成功返回的是搜索结果，否则通过searchByKeyword方法对输入框里的内容进行搜索。可以打印搜索结果，可以清晰的看到搜索结果里的内容，将地图中心点更改为当前点经纬度，去除当前点地址，清空搜索结果，隐藏搜索框即可。