vue 高德地圖之玩轉周邊

前言：在之前的博客中，有成功引入高德地圖，這是以前的地址 vue 調用高德地圖。

因為一些需求，需要使用到地圖的周邊功能。

完整的項目代碼請查看 我的github

一 、先看要實現的結果，參考了鏈家的周邊，如圖所示。

二 、原理分析

1、引入高德api，這個在之前的博客提到過，vue 調用高德地圖。

2、使用地圖的周邊插件，這是 高德網站的api。

AMap.PlaceSearch //地點搜索服務插件，提供某一特定地區的位置查詢服務

在插件中的各種方法中選取了searchNearBy的方法。

searchNearBy(keyword:String,center:LngLat,radius:Number,
callback:function(status:String,result:info/SearchResult))

// 根據中心點經緯度、半徑以及關鍵字進行周邊查詢
radius取值範圍：0-50000

3、構建查詢方法

searchData: function (callback) {
let keyWords = ["地鐵線路", "大型購物廣場", "三甲醫院", "學校"] // 自選關鍵詞
let distance = [1000, 3000, 3000, 3000]
// …………………………………………………………周邊分類…………………………………………………………………………………………………………
placeSearchOptions = { // 構造地點查詢類
pageSize: 10,
pageIndex: 1,
city: "021", // 城市
map: map,
visible: false
}
AMap.service("AMap.PlaceSearch", function {
map.clearMap // 清除地圖覆蓋物
placeSearch = new AMap.PlaceSearch(placeSearchOptions)
for (let i = 0; i < keyWords.length; i++) { placeSearch.searchNearBy(keyWords[i], [121.44343879031237, 31.207570983863118], distance[i], callback) } }) return callback },

在這個方法中，將所有的maker都查找出來，為了能夠讓後續不重新載入地圖和插件，如有更好的方法 ，歡迎指出。

4、將maker的切換事件綁定在footer下的各個選項中。

/* 註冊每項的點擊事件,默認顯示num0，也就是交通，實際上所有的數據已經請求到了，點擊按鈕只是用來切換maker */
clickItem: function (index, buttons) {
map.clearMap // 清除地圖覆蓋物
buttons.forEach(function (e, index) {
e.isActive = false
})
buttons[index].isActive = true
self.listCount = self.num[index].length
self.listText = self.num[index]
function onClick (e) {
console.log(e)
}
for (let i = 0; i < self.num[index].length; i++) { marker = new AMap.Marker({ // content: "div", title: "abc", icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b" + (i + 1) + ".png", position: [self.num[index][i].location.lng, self.num[index][i].location.lat], offset: new AMap.Pixel(-24, 5), zIndex: 1, map: map, clickable: true }) AMap.event.addListener(marker, "click", onClick) } return marker }

三、結果展示

注意：為方便演示效果，此項目中使用了個人開發者的高德秘鑰，請自行去替換成自己的。

完整的項目代碼請查看 我的github

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！