VUE——Vue-amap实现POI搜索 - 好文

大致效果：

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



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



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



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



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

new PoiPicker的时候进行配置，具体配置文档请参照：点击打开链接
<http://lbs.amap.com/api/javascript-api/reference-amap-ui/other/poipicker>

组件代码：
<template> <div> <button @click="initSearch">搜索</button> <p>{{address}}</p>
<hr> <div class="amap-page-container"> <div class="search-box" v-if="toSearch">
<input v-model="searchKey" type="search" id="search"> <button
@click="searchByHand">搜索</button> <div class="tip-box" id="searchTip"></div>
</div> <el-amap vid="amap" :zoom="zoom" class="amap-demo" :center="center"
:amapManager="amapManager" :events="events" > <el-amap-circle vid="circle"
:center="center" :radius="radius" fill-opacity="0.2" strokeColor="#38f"
strokeOpacity="0.8" strokeWeight="1" fillColor="#38f" > </el-amap-circle>
</el-amap> </div> <ul> <li v-for="item in result"
:key="item.id">{{item.name}}</li> </ul> </div> </template> <style scoped>
.amap-page-container { height: 300px; position: relative; } .search-box{
position: absolute; z-index: 5; width: 90%; left: 5%; top: 10px; height: 30px;
} .search-box input{ float: left; width: 80%; height: 100%; border: 1px solid
#38f; padding: 0 8px; } .search-box button{ float: left; width: 20%; height:
100%; background: #38f; border: 1px solid #38f; color: #fff; } .tip-box{ width:
100%; max-height:260px; position: absolute; top: 30px; overflow-y: auto;
background-color: #fff; } .toolbar{ margin-top: 15px; } hr{ border-color: red;
border-style: dashed; } </style>
JS代码：
<script> import {AMapManager} from "vue-amap" let amapManager=new
AMapManager(); export default { data() { let vm = this; return { zoom:16,
center: [121.329402,31.228667], result:[], address:"", radius:100,
toSearch:false, searchKey:'', amapManager, map:null, poiPicker:null, events:{
init(o){ vm.map=o; } } }; }, watch:{ map:function(){ if(this.map!=null){
//this.initSearch(); } } }, methods:{ initSearch(){ let vm=this; let
map=this.amapManager.getMap(); this.toSearch=true;
AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) { var poiPicker = new
PoiPicker({ input: 'search', //输入框id placeSearchOptions: { map: map, pageSize:
10 },//地点搜索配置 suggestContainer:'searchTip',//输入提示显示DOM
searchResultsContainer:'searchTip'//搜索结果显示DOM }); vm.poiPicker=poiPicker;
//监听poi选中信息 poiPicker.on('poiPicked', function(poiResult) { let source =
poiResult.source; let poi = poiResult.item; if (source !== 'search') {
poiPicker.searchByKeyword(poi.name); } else { poiPicker.clearSearchResults();
vm.center=[poiResult.item.location.lng,poiResult.item.location.lat];
vm.address=poi.name; vm.searchKey=""; vm.toSearch=false; } }); }); },
searchByHand(){ if(this.searchKey!=''){
this.poiPicker.searchByKeyword(this.searchKey); } } } }; </script>
监听poiPicked事件，得到返回结果poiResult
poiResult里面的source字段会对操作加以说明若是点击提示文字时
source为suggest,否则为search，由此进行判断，若为search，则表示搜索成功返回的是搜索结果，否则通过searchByKeyword方法对输入框里的内容进行搜索。可以打印搜索结果，可以清晰的看到搜索结果里的内容，将地图中心点更改为当前点经纬度，去除当前点地址，清空搜索结果，隐藏搜索框即可。

热门工具换一换