1.地图的安装及引入看官网（下面链接）

JS API结合Vue使用-JS API与前端框架结合-教程-地图 JS API v2.0 | 高德地图API

下面是实现效果（非项目最终效果）

2.创建一个div作为地图容器（我这里用的id名是"gd_map"）

3.初始化地图并注册AmapUI

4.地图上小车图标引入

小车的图标来源阿里iconfont图标库。使用的是在线连接

在项目中有两种引入方式。

第一种.在public文件夹下的index.html通过script标签引入

第二种.在高德地图组件页面通过js创建标签引入

5.创建使用AMapUI组件

icon的属性值，也就是我地图里的小车，是iconfont的图标名

VUE使用高德JSAPI和AmapUI相关推荐

vue 使用高德JSapi 实现轨迹回放和海量点效果（点击显示详情提示窗口）采用AMapLoader 和 AMapUI
第一步注册高德开发者平台账号 (个人选择个人账户) 地址见 https://lbs.amap.com/api 第二步在控制台中申请Key(输入key,选择web端,提交即可) 第三步通过JSAp ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...
高德地图html js开发例子,vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI 2.地图dom 3.js实现 export default { data() {}, methods:{ initMap(){ let map = n ...
vue使用高德地图的行政区域浏览
工作用遇到这样的需求,要求在地图上把每个行政区画上不同的色块, 并且添加一个标注文本来说明,也就是实现下图这种的效果 : 这是金华市下的各级县市的区域划分上面的效果, 高德可以有两种方式来实理一 ...
vue 使用高德地图（vue-amap）记录
vue 使用高德地图 (vue-amap)记录效果图第一步下载vue-amap依赖: npm install vue-amap --save 高德地图ui:https://lbs.amap.co ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...

VUE使用高德JSAPI和AmapUI