前言:在以前的博客中,有成功引入高德地圖,這是之前的地址 vue 調用高德地圖。javascript
由於一些需求,須要使用到地圖的周邊功能。html
完整的項目代碼請查看 個人github demo的預覽地址 vue
一 、先看要實現的結果,參考了鏈家的周邊,如圖所示。java
二 、原理分析git
一、引入高德api,這個在以前的博客提到過,vue 調用高德地圖。github
二、使用地圖的周邊插件,這是 高德網站的api。web
AMap.PlaceSearch //地點搜索服務插件,提供某一特定地區的位置查詢服務
在插件中的各類方法中選取了searchNearBy的方法。api
searchNearBy(keyword:String,center:LngLat,radius:Number, callback:function(status:String,result:info/SearchResult)) // 根據中心點經緯度、半徑以及關鍵字進行周邊查詢 radius取值範圍:0-50000
三、構建查詢方法post
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都查找出來,爲了可以讓後續不從新加載地圖和插件,若有更好的方法 ,歡迎指出。網站
四、將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 }
3、結果展現
注意:爲方便演示效果,此項目中使用了我的開發者的高德祕鑰,請自行去替換成本身的。
轉載請註明原文地址 謝謝!