|  |  |  | 
|---|
|  |  |  | <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 class="layui-col-md12"> | 
|---|
|  |  |  | <div class="layui-card"> | 
|---|
|  |  |  | <button type="button" id="createPolygon" style="margin-bottom: 2px">新建围栏 | 
|---|
|  |  |  | </button> | 
|---|
|  |  |  | <button type="button" id="open" style="margin-bottom: 2px">开始编辑 | 
|---|
|  |  |  | </button> | 
|---|
|  |  |  | <button type="button" id="close" style="margin-bottom: 2px">结束编辑 | 
|---|
|  |  |  | </button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="layui-form-item"> | 
|---|
|  |  |  | <div class="layui-input-block"> | 
|---|
|  |  |  | <div class="layui-row febs-container"> | 
|---|
|  |  |  | <div class="layui-card"> | 
|---|
|  |  |  | <div style="padding: .1rem;"> | 
|---|
|  |  |  | <div id="container" class="map"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </form> | 
|---|
|  |  |  | <div style="padding: .1rem;"> | 
|---|
|  |  |  | <div id="container" class="map"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | $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) | 
|---|
|  |  |  | ]; | 
|---|
|  |  |  | // center: [116.368904,39.913423], | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 创建折线实例 | 
|---|
|  |  |  | var polyline = new AMap.Polyline({ | 
|---|
|  |  |  | path: path, | 
|---|
|  |  |  | borderWeight: 2, // 线条宽度,默认为 1 | 
|---|
|  |  |  | strokeColor: 'red', // 线条颜色 | 
|---|
|  |  |  | lineJoin: 'round' // 折线拐点连接处样式 | 
|---|
|  |  |  | resizeEnable: true, | 
|---|
|  |  |  | zoom: 14 | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 将折线添加至地图实例 | 
|---|
|  |  |  | map.add(polyline); | 
|---|
|  |  |  | var polyEditor = new AMap.PolyEditor(map); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | //为地图注册click事件获取鼠标点击出的经纬度坐标 | 
|---|
|  |  |  | var path = []; | 
|---|
|  |  |  | // 折线的节点坐标数组,每个元素为 AMap.LngLat 对象 | 
|---|
|  |  |  | // 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.387272,39.912502), | 
|---|
|  |  |  | //     new AMap.LngLat(116.387273,39.912503), | 
|---|
|  |  |  | //     new AMap.LngLat(116.487274,39.812504), | 
|---|
|  |  |  | //     new AMap.LngLat(116.398258,39.904600) | 
|---|
|  |  |  | // ]; | 
|---|
|  |  |  | map.on('click', function (e) { | 
|---|
|  |  |  | febs.alert.success('经度:' + e.lnglat.getLng() + ',纬度:' + e.lnglat.getLat()); | 
|---|
|  |  |  | let lngLat = new AMap.LngLat(e.lnglat.getLng(),e.lnglat.getLat()); | 
|---|
|  |  |  | path.push(lngLat); | 
|---|
|  |  |  | alert(path); | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | var polyline = new AMap.Polyline({ | 
|---|
|  |  |  | path: path, | 
|---|
|  |  |  | borderWeight: 2, // 线条宽度,默认为 1 | 
|---|
|  |  |  | strokeColor: 'red', // 线条颜色 | 
|---|
|  |  |  | lineJoin: 'round' // 折线拐点连接处样式 | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | // 将折线添加至地图实例 | 
|---|
|  |  |  | map.add(polyline); | 
|---|
|  |  |  | console.log(path.toString()); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // // 创建折线实例 | 
|---|
|  |  |  | // var polyline = new AMap.Polyline({ | 
|---|
|  |  |  | //     path: path, | 
|---|
|  |  |  | //     borderWeight: 2, // 线条宽度,默认为 1 | 
|---|
|  |  |  | //     strokeColor: 'red', // 线条颜色 | 
|---|
|  |  |  | //     lineJoin: 'round' // 折线拐点连接处样式 | 
|---|
|  |  |  | // }); | 
|---|
|  |  |  | // | 
|---|
|  |  |  | // | 
|---|
|  |  |  | // | 
|---|
|  |  |  | // // 将折线添加至地图实例 | 
|---|
|  |  |  | // map.add(polyline); | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | $createPolygon.on('click', function () { | 
|---|
|  |  |  | febs.alert.success('点击新建'); | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | $open.on('click', function () { | 
|---|
|  |  |  | febs.alert.success('开始编辑'); | 
|---|
|  |  |  | path.splice(path.length -1); | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | alert(path); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | var polyline = new AMap.Polyline({ | 
|---|
|  |  |  | path: path, | 
|---|
|  |  |  | borderWeight: 2, // 线条宽度,默认为 1 | 
|---|
|  |  |  | strokeColor: 'red', // 线条颜色 | 
|---|
|  |  |  | lineJoin: 'round' // 折线拐点连接处样式 | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | // 将折线添加至地图实例 | 
|---|
|  |  |  | // map.cleanData(polyline); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | map.add(polyline); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | $close.on('click', function () { | 
|---|
|  |  |  | febs.alert.success('结束编辑'); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | </script> | 
|---|