vue+高德地图写地图选址组件的方法

然后我们来看一看搜索的方法：

keySearch(){
   AMap.service(["AMap.PlaceSearch"], () => {
     //构造地点查询类
     var placeSearch = new AMap.PlaceSearch({
       type: '汽车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|地名地址信息', // 兴趣点类别
       pageSize: 30, // 单页显示结果条数
       pageIndex: 1, // 页码
       city: "全国", // 兴趣点城市
       citylimit: false, //是否强制限制在设置的城市内搜索
       autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
     });
     //关键字查询
     placeSearch.search(this.search_key,(status, result) => {
       if(status == 'complete'){
         if(result.poiList.count === 0){
           this.noSearchShow = true;
         }else{
           this.search_list = result.poiList.pois//将查询到的地点赋值
           this.noSearchShow = false;
         }
       }else{
         this.search_list = [];
         this.noSearchShow = true;
       }
     });
   });
 },

还是copy高德的方法过来，然后进行配置，主要说一下这里返回结果的处理：
1.status为complete的时候是完成查询，其中完成后有一个count 参数是代表查到的总条数，如果总条数为0时，我们就this.noSearchShow = true，这个我们上面说了，当noSearchShow 为true的时候会显示‘暂无搜索结果’；如果count不为0的时候，也就是else中的内容，那就将我们查询到的值赋给this.search_list，然后遍历出来，然后记得this.noSearchShow = false;
2.另外我是将status不为complete的情况统统视为没有搜索结果，这时候我们就清空this.search_list，然后this.noSearchShow = true。

这时候搜索也完成了，接下来如果我们不想搜索了，清空了搜索框，这是点×的清空方法：

<span class="clear" v-if="search_key" @click="search_key = ''"></span>

直接@click=”search_key = ‘'”就行了，当然我们也可以用输入键盘退格删除，这时要注意清空input之后我们要把search_list也清空并且this.noSearchShow = false，这里我是使用了watch来监控search_key：

watch: {
   search_key(newv,oldv){
     if(newv == ''){
       this.search_list = [];
       this.noSearchShow = false;
     }
   }
 },

至于为什么要清空呢？因为如果我们第一次进行了搜索，这时search_list就有值了，如果下次在进入搜索状态，就会直接显示上次的搜索列表，所以我们要清空一下。