vue+高德地圖寫地圖選址組件的方法

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

data(){
  return{
    center: [106.532357,29.57212],//緯度-經(jīng)度
    search_key: '',        //搜索值
    lists: [],							//地點(diǎn)列表
    search_list: [],       //搜索結(jié)果列表
    noSearchShow: false  //無搜索結(jié)果提示，無搜索結(jié)果時(shí)會(huì)顯示暫無搜索結(jié)果
  }
 },

adMap(){
	//初始化地圖
  var map = new AMap.Map('container',{
    zoom: 14,      //縮放級(jí)別
    center: this.center, //設(shè)置地圖中心點(diǎn)
    //resizeEnable: true, //地圖初始化加載定位到當(dāng)前城市
  });
  //獲取初始中心點(diǎn)并賦值
  var currentCenter = map.getCenter();//此方法是獲取當(dāng)前地圖的中心點(diǎn)
  this.center = [currentCenter.lng,currentCenter.lat];//將獲取到的中心點(diǎn)的緯度經(jīng)度賦值給data的center
  //根據(jù)地圖中心點(diǎn)查附近地點(diǎn)，此方法在下方
  this.centerSearch();
  //監(jiān)聽地圖移動(dòng)事件，并在移動(dòng)結(jié)束后獲取地圖中心點(diǎn)并更新地點(diǎn)列表
  var moveendFun = (e) => {
    // 獲取地圖中心點(diǎn)
    currentCenter = map.getCenter();
    this.center = [currentCenter.lng,currentCenter.lat]
    //根據(jù)地圖中心點(diǎn)查附近地點(diǎn)
    this.centerSearch();
  }
  // 綁定事件移動(dòng)地圖事件
  map.on('moveend', moveendFun);
},

centerSearch(){
  AMap.service(["AMap.PlaceSearch"], () => {
    //構(gòu)造地點(diǎn)查詢類
    var placeSearch = new AMap.PlaceSearch({ 
      type: '汽車服務(wù)|餐飲服務(wù)|購物服務(wù)|生活服務(wù)|體育休閑服務(wù)|醫(yī)療保健服務(wù)|住宿服務(wù)|風(fēng)景名勝|(zhì)商務(wù)住宅|政府機(jī)構(gòu)及社會(huì)團(tuán)體|科教文化服務(wù)|交通設(shè)施服務(wù)|金融保險(xiǎn)服務(wù)|公司企業(yè)|地名地址信息', // 興趣點(diǎn)類別
      pageSize: 30, // 單頁顯示結(jié)果條數(shù)
      pageIndex: 1, // 頁碼
      city: "全國", // 興趣點(diǎn)城市
      autoFitView: false // 是否自動(dòng)調(diào)整地圖視野使繪制的 Marker點(diǎn)都處于視口的可見范圍
    });
    //根據(jù)地圖中心點(diǎn)查附近地點(diǎn)
    placeSearch.searchNearBy('', [this.center[0],this.center[1]], 200, (status, result) => {
      if(status == 'complete'){
        this.lists = result.poiList.pois//將查詢到的地點(diǎn)賦值
      }
    });
  });
 },

<!--搜索列表-->
<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>暫無搜索結(jié)果</p></li>
  </ul>
</div>

keySearch(){
   AMap.service(["AMap.PlaceSearch"], () => {
     //構(gòu)造地點(diǎn)查詢類
     var placeSearch = new AMap.PlaceSearch({
       type: '汽車服務(wù)|餐飲服務(wù)|購物服務(wù)|生活服務(wù)|體育休閑服務(wù)|醫(yī)療保健服務(wù)|住宿服務(wù)|風(fēng)景名勝|(zhì)商務(wù)住宅|政府機(jī)構(gòu)及社會(huì)團(tuán)體|科教文化服務(wù)|交通設(shè)施服務(wù)|金融保險(xiǎn)服務(wù)|公司企業(yè)|地名地址信息', // 興趣點(diǎn)類別
       pageSize: 30, // 單頁顯示結(jié)果條數(shù)
       pageIndex: 1, // 頁碼
       city: "全國", // 興趣點(diǎn)城市
       citylimit: false, //是否強(qiáng)制限制在設(shè)置的城市內(nèi)搜索
       autoFitView: false // 是否自動(dòng)調(diào)整地圖視野使繪制的 Marker點(diǎn)都處于視口的可見范圍
     });
     //關(guān)鍵字查詢
     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//將查詢到的地點(diǎn)賦值
           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的時(shí)候?qū)ocation傳進(jìn)來
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)
}