前言：在之前的博客中，有成功引入高德地图，这是以前的地址 。
因为一些需求，需要使用到地图的周边功能。
一 、先看要实现的结果，参考了链家的周边，如图所示。
二 、原理分析
2、使用地图的周边插件，这是 。
// 根据中心点经纬度、半径以及关键字进行周边查询
radius取值范围：0-50000
radius取值范围：0-50000
分类…………………………………………………………………………………………………………
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
}
三、结果展示
注意：为方便演示效果，此项目中使用了个人开发者的高德秘钥，请自行去替换成自己的。
完整的项目代码请查看 nofollow" target="_blank" href="https://github.com/qianyinghuanmie/vue2.0-demos">我的github
内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/vue/38575.html