<div class="layui-fluid layui-anim febs-anim" id="febs-map-demo-test" lay-title="高德地图">
|
<div class="layui-row febs-container">
|
<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>
|
</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],
|
|
resizeEnable: true,
|
zoom: 14
|
});
|
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>
|
