VUE——Vue-amap实现POI搜索

大致效果：

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

        

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

        

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

        

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

        

这里使用官方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方法对输入框里的内容进行搜索。可以打印搜索结果，可以清晰的看到搜索结果里的内容，将地图中心点更改为当前点经纬度，去除当前点地址，清空搜索结果，隐藏搜索框即可。