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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
vue配置多页面的实现方法
May 22 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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动态生成函数示例
2014/03/21 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
php显示页码分页类的封装
2017/06/08 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
2016年大学自主招生自荐信范文
2015/03/24 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
学校体育节班级口号
2015/12/25 职场文书
详解Python牛顿插值法
2021/05/11 Python
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
Go Plugins插件的实现方式
2021/08/07 Golang
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技