大致效果:
点击搜索按钮,出现搜索框
搜索框里输入文字,自动联想并提示搜索结果,供选择
点击某个提示结果,进入详细搜索结果
选择想要的结果,搜索结果隐藏,搜索框隐藏,地图中心点变为选择的地方
这里使用官方UI里面的misc/PoiPicker
new 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方法对输入框里的内容进行搜索。可以打印搜索结果,可以清晰的看到搜索结果里的内容,将地图中心点更改为当前点经纬度,去除当前点地址,清空搜索结果,隐藏搜索框即可。