vue：高德地图的使用

1.安装

npm安装：

npm install vue-amap --save

CDN：

<script src="https://unpkg.com/vue-amap/dist/index.js"></script>

2.配置

main.js：

import Vue from 'vue';
import VueAMap from 'vue-amap'; // 高德Vue.use(VueAMap);
VueAMap.initAMapApiLoader({key: '*******你的key*********',plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation'],v: '1.4.4'
});

3.使用地图

相关参数请参考：组件 | vue-amap

html：

<el-amap vid="amap" :plugin="plugin" :events="events" class="amap" :center="center" :zoom="zoom"><el-amap-marker :position="center" vid="amapMarker"></el-amap-marker>
</el-amap>

el-amap-marker：地图的标记点，不需要可以不用写，我这里需要

js：

data () {let self = this;return {nearbyInfo: [], // 周边信息---高德反馈（周边建筑信息）addressInfo: '', // 城市信息---高德反馈（省市区、adcode）center: [0, 0], // 高德地图中心点zoom: 15, // 地图缩放events: {'click': (e) => { // 点击地图的时候，获取点击的经纬度，并将地图中心点移自此处let m = e.lnglat;self.addrInput = '';self.center = [m.lng, m.lat];self.GDmapGetInfoOfNearby(m.lng, m.lat, self); // 获取周边信息}},plugin: [{pName: 'Geolocation',noIpLocate: 1, // ios11： 禁止ip定位：ios11之后默认是ip定位，参数为1则是禁止ip定位events: {init: (o) => {self.GDinit(o, self); // 获取当前位置}}}]};},

使用‘Geolocation’的时候一定要在前面的配置中写上“AMap.CircleEditor”，否则不生效。

/* 初始化定位当前位置 */GDinit (o, self) {o.getCurrentPosition((status, result) => {console.log(status, result);if (status === 'complete' && result.info === 'SUCCESS') {let lat = result.position.lat;let lng = result.position.lng;self.center = [lng, lat];self.GDmapGetInfoOfNearby(lng, lat, self); // 获取周边信息}});},

/* 获取周边建筑信息 */GDmapGetInfoOfNearby (lng, lat, self) {// 这里通过高德 SDK 完成。let geocoder = new AMap.Geocoder({ radius: 1000,extensions: 'all',poitype: ''});geocoder.getAddress([lng, lat], (status, result) => {if (status === 'complete' && result.info === 'OK') {if (result && result.regeocode) {console.log(result);self.$nextTick();}}});},

radius：搜索半径，

poitype:返回附近POI类型(周边信息)，相关地址：地理/逆地理编码-API文档-开发指南-Web服务 API | 高德地图API，

文档下载地址：相关下载-Web服务 API | 高德地图API

extensions：返回结果控制，参数为 all 时poitype才生效

相关参数地址：地理/逆地理编码-API文档-开发指南-Web服务 API | 高德地图API

4.地图搜索功能

<el-amap-search-box class="search-box" :on-search-result="GDonSearchResult"></el-amap-search-box>

    /* 搜索结果回调函数 */GDonSearchResult (e) {console.log(e);this.center = [e.lng, e.lat];this.GDmapGetInfoOfNearby(e[0].lng, e[0].lat, this);}

vue：高德地图的使用相关推荐

利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
vue+高德地图绘制路径
一.vue+高德地图开发最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
vue + 高德地图 + wind-layer实现风场
vue + 高德地图 + wind-layer实现风场效果图: 第一步:引入 wind-layer插件或者 npm install ol-wind npm install amap-wind ht ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局绘制页面 <div class="Clock"><!-- ...
Vue 高德地图 js API Loca 如何使用连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用连接线图层.脉冲连线图层阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式已经了解如何载入 Loca 插件如果不了解,可以查看我之 ...
Android+SpringBoot+Vue+高德地图实现后台查看车辆实时位置功能
场景通过给车辆的驾驶员的手机安装app,管理员在后台可以实时查看车辆的实时位置. 实现思路: app中集成高德地图,app启动登录后,定时地获取当前定位信息连同当前账号上传到服务器后台. 后台将获取 ...
vue 高德地图搜索功能_VUE中使用高德地图做轨迹添加功能,帮助轨迹展示
准备工作使用前准备 : 高德地图key 使用插件: vue-amap 1.npm安装vue-amap npm install vue-amap --save import AMap from 'vu ...
vue[高德地图行车路径规划以及路线记录绘制操作]
最近的一个项目中需要根据需求将地图上画出一条高速公路,然后将这条高速公路的行车轨迹绘制成一条带有颜色路线以便后续插入内容. 看遍了不少高德地图的api内容以及搜索了不少的网上资源,发现可以通过路径规划 ...

vue：高德地图的使用

vue：高德地图的使用相关推荐

最新文章

热门文章