vue高德地图之玩转周边
时间:2019-03-30
本文章向大家介绍vue高德地图之玩转周边,主要包括vue高德地图之玩转周边使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言:在之前的博客中,有成功引入高德地图,这是以前的地址 vue 调用高德地图。
因为一些需求,需要使用到地图的周边功能。
完整的项目代码请查看 我的github
一 、先看要实现的结果,参考了链家的周边,如图所示。
二 、原理分析
1、引入高德api,这个在之前的博客提到过,vue 调用高德地图。
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 }
三、结果展示
注意:为方便演示效果,此项目中使用了个人开发者的高德秘钥,请自行去替换成自己的。
完整的项目代码请查看 我的github
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于IdentityServer4的OIDC实现单点登录(SSO)原理简析
- OpenGL ES 变量、结构体、语句、函数、精度
- OpenGL ES for Android 绘制矩形和正方形
- OpenGL ES for Android 绘制立方体
- 服务化最佳实践
- OpenGL ES for Android 深度测试
- OpenGL ES for Android 绘制旋转的地球
- [Hei.Captcha] Asp.Net Core 跨平台图形验证码实现
- Asp.Net Core 3.1 获取不到Post、Put请求的内容 System.NotSupportedException Specified method is not supported
- OpenGL ES for Android 播放视频
- Centos 7 在线安装 离线安装 最新 Docker-compose 的正确姿势 实践笔记
- OpenGL ES for Android 视频缩放、旋转、平移
- OpenGL ES for Android 相机预览
- OpenGL ES for Android 相机预览适配不同分辨率的手机
- Flutter Widgets 之 Container