vue高德地图之玩转周边


Posted in Javascript onJune 16, 2017

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

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

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

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

vue高德地图之玩转周边

 二 、原理分析

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
  }

三、结果展示

vue高德地图之玩转周边

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
js分页代码分享
Apr 28 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 #Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 #Javascript
vue之数据交互实例代码
Jun 16 #Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 #jQuery
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 #Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 #jQuery
基于JS实现网页中的选项卡(两种方法)
Jun 16 #Javascript
You might like
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
中止javascript执行的方法
2014/02/14 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
Python脚本调试工具安装过程
2021/01/11 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
劳资专员岗位职责
2013/12/27 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
高中家长寄语
2014/04/02 职场文书
活动总结报告范文
2014/05/04 职场文书
商务考察邀请函模板
2015/02/02 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
《确定位置》教学反思
2016/02/18 职场文书