JS高德地图API实现电子围栏范围设置，高德地图API电子围栏范围考勤设置，JS高德地图判断用户当前位置是否在围栏范围内

前言

JS使用高德地图API实现地图圆圈围栏范围设置

效果图

实现

初始化地图

	// 【初始化地图】
    var map = new AMap.Map('container', {
    
    
        pitch: 60, // 倾斜角度
        //rotation: -15, // 旋转角度
        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
        zoom: 18, // 初始化地图层级，地图默认缩放大小
        buildingAnimation: true, // 建筑出现的动画
        //zoomEnable: true, // 地图是否可缩放，默认值为 true
        //doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认 true
        //dragEnable: false, // 地图拖拽移动移动，默认 true
        //scrollWheel: false,   // 关闭缩放，默认 true
        resizeEnable: true, //是否监控地图容器尺寸变化
        center: [114.055639, 22.533181] // 初始化地图中心点
    });

绘画圆圈并编辑

	// 圆形围栏绘画
    var circle = new AMap.Circle({
    
    
        center: [114.055639, 22.533181],  // 圆心位置，默认经纬度，可通过用户当前位置经纬度填充
        radius: 100, // 圆半径，单位:米
        fillColor: '#a4d5ff',   // 圆形填充颜色
        strokeColor: '#59b0fb', // 描边颜色
        strokeWeight: 2, // 描边宽度
    });
    //circle.setMap(map);
    map.add(circle);
    // 缩放地图到合适的视野级别
    map.setFitView([circle]);
    map.plugin(["AMap.CircleEditor"], function () {
    
    
        var circleEditor = new AMap.CircleEditor(map, circle);
        circleEditor.open(); // 直接打开编辑圆圈
        circleEditor.on('adjust', function (event) {
    
    
            console.log("圈大小变动：", event)
            console.log("圈大小-半径：", event.radius, "经度：", event.lnglat.lng, "纬度：", event.lnglat.lat)
        })
        circleEditor.on('move', function (event) {
    
    
            console.log("圈的中心被拖动：", event)
            console.log("圈拖动-经度：", event.lnglat.lng, "纬度：", event.lnglat.lat)
        })
    });

判断当前位置是否在圈的范围内

	// 圆形围栏绘画
    var circle = new AMap.Circle({
    
    
        center: [114.055639, 22.533181],  // 圆心位置，设置的圆圈经纬度
        radius: 100, // 圆半径，单位:米
        fillColor: '#a4d5ff',   // 圆形填充颜色
        strokeColor: '#59b0fb', // 描边颜色
        strokeWeight: 2, // 描边宽度
    });
    //circle.setMap(map);
    map.add(circle);
    // 缩放地图到合适的视野级别
    map.setFitView([circle]);
    // 需要使用延迟，不然会全部判断都是false
    setTimeout(function () {
    
    
        var contains1 = circle.contains([114.055006, 22.533964]); // 用户的位置经纬度
        console.log("是否在范围内1：", contains1);
        var contains2 = circle.contains([114.055639, 22.533181]); // 用户的位置经纬度
        console.log("是否在范围内2：", contains2);
    }, 1000)

如上即可完成范围控制！
更多形状设置，如：多边形、弧形、折线、椭圆等…
可参考官方文档：https://lbs.amap.com/demo/javascript-api/example/overlayers/circle-draw-and-edit