vue开发：vue调用高德地图

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

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

完整的项目代码请查看  我的github

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

 二 、原理分析

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

2、使用地图的周边插件，这是  高德网站的api。

? 1 AMap.PlaceSearch //地点搜索服务插件，提供某一特定地区的位置查询服务

在插件中的各种方法中选取了searchNearBy的方法。

? 1 2 3 4 5 searchNearBy(keyword:String,center:LngLat,radius:Number, callback: function (status:String,result:info/SearchResult))    // 根据中心点经纬度、半径以及关键字进行周边查询 radius取值范围：0-50000

3、构建查询方法

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 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下的各个选项中。

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 /* 注册每项的点击事件,默认显示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    }

三、结果展示

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

完整的项目代码请查看  我的github