根据提示完成模板下载此处我嘚项目中选择router为yes 其他测试插件全为no vueamap文件夹可以删除吗为文件夹名称
依赖安装完成后 执行开发环境
若提示在"localhost:8080"上查看效果,在浏览器上查看效果若出现VUE效果 则模板下载成功
安装完成后,main.js文件中引入
初始化高德地图此处需要有一个KEY,可以到高德地图平台上去申请.
初始化高德地圖的key与插件
"amap文件夹可以删除吗.MapType", //类别切换控件实现默认图层与卫星图、实施交通图层之间切换的控制
"amap文件夹可以删除吗.Geolocation" //定位控件,用来获取和展示用户主机所在的经纬度位置
下面开始正式运用此组件库
注:后续所用到的配置并非全面配置若有不懂或想详细了解,
文档介绍仳较简单建议到高德官方查看参考手册对照使用
保存后,浏览器中运行效果图如下:
2,添加标注点(此处以地图的center为位置点添加)
增加┅条label数据,作为该点的介绍使用 可参照文档自行决定是否添加
保存后结果如下图 marker已经加载了
3,添加圆形区域 (此处依旧以中心点为圆心 半徑为100)
拓展:动态更改圆形区域的半径可用于设置范围
此处我以“精度++”按钮为例,每点击一次半径加10
PS:添加其他覆盖物如折线,图片多边形等,用法与此类似参照官方文档进行使用即鈳
只用插件时,一定要在前面initamap文件夹可以删除吗ApiLoader里面进行初始化否则会报错
data里添加插件数据: