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

//根据地图中心点查附近地点，此方法在下方
this.centerSearch();
//监听地图移动事件，并在移动结束后获取地图中心点并更新地点列表
var moveendFun = (e) => {
// 获取地图中心点
currentCenter = map.getCenter();
this.center = [currentCenter.lng,currentCenter.lat] //根据地图中心点查附近地点
this.centerSearch();
}
// 绑定事件移动地图事件
map.on('moveend', moveendFun);
},

根据中心点查询附近地点

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

这个方法没什么好说的，就是高德地图的方法，copy过来就行了，要注意的几个点：

1.type，需要查找的地点的分类，这个可以按需添加减少；

2.这里可以传条数和页码，如果需要做上拉加载的都可以使用这个；

3.placeSearch.searchNearBy(),这个方法的第二个参数就是经纬度，是一个数组，这里要注意纬度在前，经度在后；

4.然后是返回值status是状态，result是结果，具体的请参考：
https://lbs.amap.com/api/javascript-api/reference/search#m_AMap.PlaceSearch

到这里我们一个地点展示的功能就可以使用了，接下来就是搜索
首先我使用了watch监听了用户输入的搜索值，当search_key（用户输入的值）不为空时：

<!--搜索列表-->
<div class="search-list" v-if="!!search_key">
  <ul>
    <li v-for="(item, index) in search_list" :key="index" @click="onSearchLi(item.location)">
      <span>{{item.name}}</span>
      <p>{{item.address}}</p>
    </li>
    <li v-if="noSearchShow"><p>暂无搜索结果</p></li>
  </ul>
</div>

我们使用v-if判断当search_key不为空时就显示搜索列表，这里的双感叹号就是强制转换为布尔值，不写也可以的，具体为啥我在这就不多说了；这里的search-list就是定位在页面上的，把地图给它覆盖了，css相信大家都会。