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

<script src="https://webapi.amap.com/maps?v=1.4.14&key=yourKey"></script>

data(){
  return{
    center: [106.532357,29.57212],//纬度-经度
    search_key: '',        //搜索值
    lists: [],							//地点列表
    search_list: [],       //搜索结果列表
    noSearchShow: false  //无搜索结果提示，无搜索结果时会显示暂无搜索结果
  }
 },

adMap(){
	//初始化地图
  var map = new AMap.Map('container',{
    zoom: 14,      //缩放级别
    center: this.center, //设置地图中心点
    //resizeEnable: true, //地图初始化加载定位到当前城市
  });
  //获取初始中心点并赋值
  var currentCenter = map.getCenter();//此方法是获取当前地图的中心点
  this.center = [currentCenter.lng,currentCenter.lat];//将获取到的中心点的纬度经度赋值给data的center
  //根据地图中心点查附近地点，此方法在下方
  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//将查询到的地点赋值
      }
    });
  });
 },

<!--搜索列表-->
<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>

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;
       }
     });
   });
 },

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

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

//这里我们遍历search_list的时候将location传进来
onSearchLi(location){
  this.center = [location.lng,location.lat];
  this.adMap();
  this.search_key = '';
},

//html
<li v-for="(item, index) in lists" :key="index" @click="onResLi(item)">
       <span>{{item.name}}</span>
       <p>{{item.address}}</p>
</li>

//js  
onResLi(e){
   console.log(e)
}