vue+高德离线地图vue-amap开发

前言：

       在使用多次高德离线地图的插件 vue-amap  感觉收获还是很多的，这里来整理下相关资料

效果图：

目录：

 

实现步骤：（源码在最下面）

一、安装插件

二、template配置基础的地图组件

三、data里面定义相关数据

四、撒点的实现，

1、template:

2、data部分定义字段:

3、methods里面动态加点，我这里还给对应的点加弹框了

五、给每个点配置弹框

1、template:

2、data部分定义字段:

3、methods里面动态加点，我这里还给对应的点加弹框了

六、画线

1、template:

2、data部分定义字段:

七、画范围

1、template:

2、data部分定义字段:

源码：

 

---

实现步骤：（源码在最下面）

一、安装插件

cnpm install vue-amap --save

二、template配置基础的地图组件

三、data里面定义相关数据

        center: [108.90315, 34.21903], // 中心位置
        zoom: 14,

四、撒点的实现，

1、template:

2、data部分定义字段:

3、methods里面动态加点，我这里还给对应的点加弹框了

五、给每个点配置弹框

1、template:

2、data部分定义字段:

3、methods里面动态加点，我这里还给对应的点加弹框了

六、画线

1、template:

2、data部分定义字段:

七、画范围

1、template:

2、data部分定义字段:

源码：

到此就结束了