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

雨点打透心脏的1/2处 2023-03-01 14:54 12阅读 0赞

## 注册账号并申请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][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);

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

[https_lbs.amap.com_api_javascript-api_summary]: https://lbs.amap.com/api/javascript-api/summary