溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
現在做這個移動端的項目中有一個地圖選址的功能，本來高德地圖中有一個現成的選址組件，但是有兩個問題，因為他是用iframe引用的，第一改不了樣式，這點還勉強能接受；第二他的左上角有一個返回鍵，在搜索的時候可以返回到地圖界面，但是在地圖界面時點返回沒有用，試了半天也沒搞明白怎么監聽到那個返回鍵的點擊事件，所以趁這兩天項目基本結束自己寫一個把這個功能優化一下，也方便以后使用。
開整
vue的安裝使用啥的我在這就不說了，直接開始地圖選址組件。
首先上高德開放平臺弄一個key，然后在index.html引入
<script src="https://webapi.amap.com/maps?v=1.4.14&key=yourKey"></script>
然后寫樣式
css我就不貼了，大概就是上面一個搜索框，中間是地圖，然后下面是一個地址列表，然后一個搜索結果的列表。有一點值得注意一下，就是地圖中心的定位圖標，這個自己弄一個定位圖標使用絕對定位，上下左右外邊距為auto的方法定位到中間，但是這時地圖的中心點是在圖標的中心，我們的圖標不是一般都是下面是尖的嘛，選址的時候都會用尖的部分指到目標位置，那這樣就會有一點偏差，怎么辦呢，比如我們的圖標是30*30的，我們就把bottom的值設為圖標的高度的一半15，或者是把top設為-15，就ok了，另外注意在切圖的時候靠著圖標邊切，不要留空白。
data里定義的值：
data(){
return{
center: [106.532357,29.57212],//緯度-經度
search_key: '', //搜索值
lists: [], //地點列表
search_list: [], //搜索結果列表
noSearchShow: false //無搜索結果提示，無搜索結果時會顯示暫無搜索結果
}
},
然后在mounted中調取第一個方法------初始化地圖：
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//將查詢到的地點賦值
}
});
});
},
這個方法沒什么好說的，就是高德地圖的方法，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相信大家都會。
然后我們來看一看搜索的方法：
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就有值了，如果下次在進入搜索狀態，就會直接顯示上次的搜索列表，所以我們要清空一下。
上面是說的放棄了搜索，這里是說如果搜索到了我們想要的結果，那我們會去點擊我們想要的結果：
//這里我們遍歷search_list的時候將location傳進來
onSearchLi(location){
this.center = [location.lng,location.lat];
this.adMap();
this.search_key = '';
},
這里的步驟是：
1.先給this.center賦值，這里注意緯度在前，經度在后！
2.調取上面的this.adMap()查詢一次新的lists；
3.清空search_key，清空search_key后搜索列表就會自動隱藏了，另外因為我們用watch監控了search_key ，所以在這里清空search_key 的同時也會清空search_list并將noSearchShow設為false。
這里基本上就差不多完成了，還有就是最后一步，我們點擊地址列表的時候獲取地址信息：
//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)
}
這里e打印出來就是選擇的地點信息。
在這里我們組件就完成了，另外可能還需要一個回到當前位置的方法，我說下思路，就不在寫出來了：
1.在地圖上寫一個圖標，給一個點擊事件；
2.點擊的時候使用高德的定位方法獲取當前位置的坐標，然后賦值給this.center；
3.再調一次adMap()方法就會回到當前位置了。
歡迎大佬批評指正優化，小弟獻丑了~
以上所述是小編給大家介紹的vue+高德地圖寫地圖選址組件的方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
