vue高德地圖之玩轉周邊

更新時間：2017年06月16日 10:30:59 作者：starWind

vue高德地圖，帶你玩轉周邊，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

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

二、原理分析

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

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

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

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

searchNearBy(keyword:String,center:LngLat,radius:Number,
callback:function(status:String,result:info/SearchResult))
 
// 根據(jù)中心點經(jīng)緯度、半徑以及關鍵字進行周邊查詢
radius取值范圍：0-50000

3、構建查詢方法

searchData: function (callback) {
  let keyWords = ['地鐵線路', '大型購物廣場', '三甲醫(yī)院', '學校'] // 自選關鍵詞
  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都查找出來，為了能夠讓后續(xù)不重新加載地圖和插件，如有更好的方法，歡迎指出。

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

 /* 注冊每項的點擊事件,默認顯示num0，也就是交通，實際上所有的數(shù)據(jù)已經(jīng)請求到了，點擊按鈕只是用來切換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
  }

三、結果展示