首页 web前端 js教程 用vue玩转高德地图实例

用vue玩转高德地图实例

Jun 24, 2017 pm 02:34 PM
地图 高德

前言:在之前的博客中,有成功引入高德地图,这是以前的地址  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: &#39;div&#39;,
            title: &#39;abc&#39;,
            icon: &#39;https://webapi.amap.com/theme/v1.3/markers/n/mark_b&#39; + (i + 1) + &#39;.png&#39;,
            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, &#39;click&#39;, onClick)
        }
        return marker
      }
登录后复制

三、结果展示

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

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

以上是用vue玩转高德地图实例的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在iPhone中使Google地图成为默认地图 如何在iPhone中使Google地图成为默认地图 Apr 17, 2024 pm 07:34 PM

iPhone上的默认地图是Apple专有的地理位置提供商“地图”。尽管地图越来越好,但它在美国以外的地区运行不佳。与谷歌地图相比,它没有什么可提供的。在本文中,我们讨论了使用Google地图成为iPhone上的默认地图的可行性步骤。如何在iPhone中使Google地图成为默认地图将Google地图设置为手机上的默认地图应用程序比您想象的要容易。请按照以下步骤操作–先决条件步骤–您必须在手机上安装Gmail。步骤1–打开AppStore。步骤2–搜索“Gmail”。步骤3–点击Gmail应用旁

小红书如何把店铺地址加入地图?店铺地址设置怎么填? 小红书如何把店铺地址加入地图?店铺地址设置怎么填? Mar 29, 2024 am 09:41 AM

随着小红书越来越受到年轻人的喜爱,越来越多的人选择在小红书上开店。许多新手卖家在设置店铺地址时遇到了困难,不知道如何把店铺地址加入地图。一、小红书如何把店铺地址加入地图?1.首先,确保您的店铺在小红书上有注册账号,并且已经成功开设店铺。2.登录小红书账号,进入店铺后台,找到“店铺设置”选项。3.在店铺设置页面,找到“店铺地址”一栏,点击“添加地址”。4.在弹出的地址添加页面,填写店铺的详细地址信息,包括省份、城市、区县、街道、门牌号等。5.填写完毕后,点击“确认添加”按钮。小红书会对您提供的地址

如何在uniapp中使用地图和定位功能 如何在uniapp中使用地图和定位功能 Oct 16, 2023 am 08:01 AM

如何在uniapp中使用地图和定位功能一、背景介绍随着移动应用的普及和定位技术的迅猛发展,地图和定位功能已经成为了现代移动应用中不可缺少的一部分。uniapp是一种基于Vue.js开发的跨平台应用开发框架,可以方便开发者在多个平台上共用代码。本文将介绍如何在uniapp中使用地图和定位功能,并提供具体的代码示例。二、使用uniapp-amap组件实现地图功能

如何使用Highcharts创建地图热力图 如何使用Highcharts创建地图热力图 Dec 17, 2023 pm 04:06 PM

如何使用Highcharts创建地图热力图,需要具体代码示例热力图是一种可视化的数据展示方式,能够通过不同颜色深浅来表示各个区域的数据分布情况。在数据可视化领域,Highcharts是一个非常受欢迎的JavaScript库,它提供了丰富的图表类型和交互功能。本文将介绍如何使用Highcharts创建地图热力图,并提供具体的代码示例。首先,我们需要准备一些数据

云端车端MapNeXt全搞定!面向下一代在线高精地图构建 云端车端MapNeXt全搞定!面向下一代在线高精地图构建 Jan 31, 2024 pm 06:06 PM

写在前面&笔者的个人理解在协作、互联和自动化移动(CCAM)中,智能驾驶车辆对周围环境的感知、建模和分析能力越强,它们就越能意识到并能够理解、做出决策,以及安全高效地执行复杂的驾驶场景。高精(HD)地图以厘米级精度和车道级语义信息表示道路环境,使其成为智能移动系统的核心组件,也是CCAM技术的关键推动者。这些地图为自动化车辆提供了了解周围环境的强大优势。高精地图也被视为隐藏的或虚拟的传感器,因为它汇集了来自物理传感器的知识(地图),即激光雷达、相机、GPS和IMU,以建立道路环境的模型。高精地图

如何在谷歌地图上使用一目了然的方向 如何在谷歌地图上使用一目了然的方向 Jun 13, 2024 pm 09:40 PM

在发布一年后,谷歌地图推出了一项新的功能。一旦您在地图上设置了目的地的路线,它就会总结您的旅行路线。旅程开始后,您可以从手机锁定屏幕“浏览”路线导航。您可以使用Google地图来查看您的预计到达时间和路线。在整个旅行期间,您可以在锁定屏幕上查看导航信息,通过解锁手机,无需访问Google地图即可查看导航信息。通过解锁手机,无需访问Google地图即可查看导航信息。通过解锁手机,无需访问Google地图,您即可查看导航信息,解锁手机,无需访问Google地图,您即可查看导航信息,解锁手机,无需访问

掌握 iPhone 和 iPad 上 Apple 地图指南的使用技巧 掌握 iPhone 和 iPad 上 Apple 地图指南的使用技巧 Aug 30, 2023 am 09:25 AM

在不断发展的技术世界中,导航数字地图的能力已成为一项基本技能。本文提供了有关如何在iPhone和iPad上使用Apple地图指南的综合指南,该功能彻底改变了用户探索周围环境和计划旅程的方式。Apple地图是所有Apple设备上的内置应用程序,它不断更新和改进,以提供无缝导航体验。它最显着的功能之一是“指南”功能,它提供了世界各地各个城市有趣景点的精选列表。此功能不仅对旅行者有利,而且对希望在自己城市中发现新景点的当地人来说也是福音。如何在iOS上使用Apple地图指南首先,访问Apple地图上的

如何下载iPhone地图以供离线使用 如何下载iPhone地图以供离线使用 Nov 04, 2023 pm 11:13 PM

随着iOS17的推出,Apple使iPhone用户可以下载地图以供离线使用。此功能为可能前往互联网连接不可靠或不存在的地区的用户提供了实用的解决方案。通过将地图下载到他们的设备上,用户可以确保即使失去蜂窝连接,他们也可以始终访问他们想要的路线。离线地图不仅仅是一个位置的静态图像。它们为用户提供了丰富的信息,例如地点的小时数和评级、转弯路线和预计到达时间。这意味着即使没有Wi-Fi或蜂窝连接,用户仍然可以导航和访问有关周围环境的关键信息。在“地图”中使用搜索功能打开“地图”应用,在搜索中搜索某个地

See all articles