vue高德地图之玩转周边

前言：在之前的博客中，有成功引入高德地图，这是以前的地址  。

因为一些需求，需要使用到地图的周边功能。

完整的项目代码请查看 

一 、先看要实现的结果，参考了链家的周边，如图所示。

 二 、原理分析

1、引入高德api，这个在之前的博客提到过，。

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
  }

三、结果展示

注意：为方便演示效果，此项目中使用了个人开发者的高德秘钥，请自行去替换成自己的。

完整的项目代码请查看 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。