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