vue 高德地图 不同区域显示不同颜色_vue+elementui爬坑之路—vue-amap

地图几乎是很多项目中不可或缺的一部分，这里介绍下在vue+element中vue-map的使用。

1、安装

npm install vue-amap --save
           

2、配置

全局配置，在main.js中配置，代码如下：

import VueAMap from 'vue-amap';Vue.use(VueAMap);//初始化VueAMap.initAMapApiLoader({  key: 'your key',  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],//依赖配置，根据自己的需求引入  // 默认高德 sdk 版本为 1.4.4  v: '1.4.4'});
           

3、使用

3-1、只显示地图及中心点定位

效果图如下

3-2、添加多个点坐标

效果图如下

3-3、自定义点坐标图案

引入的styleJson结构为

生成的效果图：

3-4、信息窗体的切换

效果图如下

3-5、区域覆盖

效果图如下

好了，这些就是关于vue-amap的基础使用了，感谢大家的阅读，欢迎大家在评论区提出建议一起讨论。