VUE 实现简单的电子围栏 （AMap）

注册账号并申请Key 

第一步：main.js 下 引入 vue-amap

import VueAMap  from 'vue-amap';

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
    key: '1ecc980127d3*****798a0eb7fa7bc32',  // 设置 key ，没有申请 高德地图申请 key 
    plugin: [ 
        'AMap.Autocomplete',
        'AMap.PlaceSearch',
        'AMap.Scale',
        'AMap.OverView',
        'AMap.ToolBar',
        'AMap.MapType',
        'AMap.PolyEditor',
        'AMap.CircleEditor',
        'AMap.MouseTool',
        'AMap.Geolocation',
    ],
    v: '1.4.15',
    uiVersion: '1.0.11'
})

这里直接用的 高德 ： https://lbs.amap.com/api/javascript-api/summary   

官方提供了很多地图功能 ， 按需求调用就行了 ； 

先把地图显示出来 

 必要的几个方法如下

    // 添加地图

    <div id="container"></div>  // 地图显示在此处


    // 地图显示在 id 叫 container 的标签里

    var map = new AMap.Map('container', {
        zoom:11,//级别
        center: [116.397428, 39.90923],//中心点坐标
        viewMode:'3D'//使用3D视图
    });

  // 多边形 Polygon   
   
    var lineArr = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
    ];  // 多边形的坐标

    var polyline = new AMap.Polyline({
        path: lineArr,          //设置线覆盖物路径
        strokeColor: "#3366FF", //线颜色
        strokeWeight: 5,        //线宽
        strokeStyle: "solid",   //线样式
    });

    map.add(polyline); // 添加到地图 


    // 移除地图方法

    map.remove(polyline);

实际看业务需求，需要什么引入什么。