20220902

xiaoyong931011

2022-09-08 9ac4d80845f961574b4732e87a4bb80993705512

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<div class="layui-fluid layui-anim febs-anim" id="febs-map-demo-test" lay-title="高德地图">
    <div class="layui-row febs-container">
        <div class="layui-card">
            <form class="layui-form layui-table-form" lay-filter="user-table-form">
                <div class="layui-col-md2 layui-col-sm12 layui-col-xs12 table-action-area">
                    <div class="input-card" style="width: 120px">
                        <button type="button" class="layui-btn layui-btn-danger" id="createPolygon" style="margin-bottom: 2px">新建围栏</button>
                    </div>
                    <div class="input-card" style="width: 120px">
                        <button type="button" class="layui-btn layui-btn-danger" id="open" style="margin-bottom: 2px">开始编辑</button>
                    </div>
                    <div class="input-card" style="width: 120px">
                        <button type="button" class="layui-btn layui-btn-danger" id="close" style="margin-bottom: 2px">结束编辑</button>
                    </div>
                </div>
            </form>
            <div style="padding: .1rem;">
                <div id="container" class="map"></div>
            </div>
        </div>
    </div>
</div>
<script data-th-inline="javascript" type="text/javascript">
    layui.use([ 'jquery', 'form', 'table', 'febs'], function () {
        var $ = layui.jquery,
            febs = layui.febs,
            $view = $('#febs-map-demo-test'),
            $createPolygon = $view.find('#createPolygon'),
            $open = $view.find('#open'),
            $close = $view.find('#close');
 
        $view.find('#container').css({"height": document.documentElement.clientHeight - 97 + 'px'});
 
        var map = new AMap.Map("container", {
            center: [116.368904,39.913423],
            zoom: 16.8
        });
        var polyEditor = new AMap.PolygonEditor(map);
        // 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
        var path = [
            new AMap.LngLat(116.368904,39.913423),
            new AMap.LngLat(116.382122,39.901176),
            new AMap.LngLat(116.387271,39.912501),
            new AMap.LngLat(116.398258,39.904600)
        ];
 
        // 创建折线实例
        var polyline = new AMap.Polyline({
            path: path,
            borderWeight: 2, // 线条宽度，默认为 1
            strokeColor: 'red', // 线条颜色
            lineJoin: 'round' // 折线拐点连接处样式
        });
 
        // 将折线添加至地图实例
        map.add(polyline);
 
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        map.on('click', function (e) {
            febs.alert.success('经度：' + e.lnglat.getLng() + '，纬度：' + e.lnglat.getLat());
        });
 
        $createPolygon.on('click', function () {
            febs.alert.success('点击新建');
        });
 
        $open.on('click', function () {
            febs.alert.success('开始编辑');
        });
 
        $close.on('click', function () {
            febs.alert.success('结束编辑');
        });
    });
</script>