vue 高德地圖之玩轉周邊

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

由於一些需求,須要使用到地圖的周邊功能。html

完整的項目代碼請查看  個人github   demo的預覽地址 vue

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

 二 、原理分析git

一、引入高德api,這個在以前的博客提到過,vue 調用高德地圖github

二、使用地圖的周邊插件,這是  高德網站的apiweb

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、結果展現

注意:爲方便演示效果,此項目中使用了我的開發者的高德祕鑰,請自行去替換成本身的。

轉載請註明原文地址 謝謝!

相關文章
相關標籤/搜索