<style>
|
#user-addLeaderFence {
|
padding: 20px 25px 25px 0;
|
}
|
|
#user-addLeaderFence .layui-treeSelect .ztree li a, .ztree li span {
|
margin: 0 0 2px 3px !important;
|
}
|
#user-addLeaderFence #data-permission-tree-block {
|
border: 1px solid #eee;
|
border-radius: 2px;
|
padding: 3px 0;
|
}
|
#user-addLeaderFence .layui-treeSelect .ztree li span.button.switch {
|
top: 1px;
|
left: 3px;
|
}
|
#user-addLeaderFence img{
|
max-width:200px
|
}
|
.map{
|
width: 50%;
|
height: 500px!important;
|
}
|
</style>
|
<div class="layui-fluid" id="user-addLeaderFence">
|
<form class="layui-form" action="" lay-filter="user-addLeaderFence-form">
|
<div class="layui-form-item febs-hide">
|
<label class="layui-form-label">id：</label>
|
<div class="layui-input-block">
|
<input type="text" name="id">
|
</div>
|
</div>
|
<div class="layui-form-item febs-hide">
|
<label class="layui-form-label">memberId：</label>
|
<div class="layui-input-block">
|
<input type="text" name="memberId">
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label febs-form-item-require">姓名：</label>
|
<div class="layui-input-block">
|
<input type="text" name="name" lay-verify="required" placeholder="" autocomplete="off" class="layui-input" readonly>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label febs-form-item-require">手机号码：</label>
|
<div class="layui-input-block">
|
<input type="text" name="phone" lay-verify="required" placeholder="" autocomplete="off" class="layui-input" readonly>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label febs-form-item-require">自提点名称：</label>
|
<div class="layui-input-block">
|
<input type="text" name="addressArea" lay-verify="required" placeholder="" autocomplete="off" class="layui-input" readonly>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label febs-form-item-require">详细地址：</label>
|
<div class="layui-input-block">
|
<input type="text" id="detailAddress" name="detailAddress" class="layui-input" readonly>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label febs-form-item-require">地图选择：</label>
|
<div class="layui-input-block">
|
<div class="layui-fluid layui-anim febs-anim" id="febs-fenceMap-demo" lay-title="高德地图">
|
<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 class="layui-form-mid layui-word-aux">鼠标左键点击地图位置，出现【标记*】，则代表选点成功</div>
|
<div class="layui-form-mid layui-word-aux">最少请选择三个点</div>
|
</div>
|
<button class="layui-btn" type="button" id="clearMap">重新设置配送范围</button>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label febs-form-item-require">经度：</label>
|
<div class="layui-input-block">
|
<input type="text" id="longitude" name="longitude" lay-verify="required" placeholder="" class="layui-input" readonly>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label febs-form-item-require">纬度：</label>
|
<div class="layui-input-block">
|
<input type="text" id="latitude" name="latitude" lay-verify="required" placeholder="" class="layui-input" readonly>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">经纬度串：</label>
|
<div class="layui-input-block">
|
<input type="text" id="longlatiarr" name="longlatiarr" lay-verify="required" placeholder="" class="layui-input" readonly>
|
</div>
|
</div>
|
<div class="layui-form-item febs-hide">
|
<button class="layui-btn" lay-submit="" lay-filter="user-addLeaderFence-submit" id="submit"></button>
|
</div>
|
</form>
|
</div>
|
<script data-th-inline="javascript">
|
layui.use(['febs', 'form', 'formSelects', 'treeSelect', 'eleTree', 'upload'], function () {
|
var $ = layui.$,
|
febs = layui.febs,
|
layer = layui.layer,
|
form = layui.form,
|
leaderInfo = [[${leaderInfo}]],
|
upload = layui.upload,
|
$view = $('#user-addLeaderFence'),
|
$viewMap = $('#febs-fenceMap-demo'),
|
$clearMap = $('#clearMap')
|
|
$viewMap.find('#container').css({"height": document.documentElement.clientHeight - 97 + 'px'});
|
|
var map = new AMap.Map("container", {
|
center: [leaderInfo.longitude, leaderInfo.latitude], //初始地图中心点
|
resizeEnable: true,
|
zoom: 16.8 //初始地图级别
|
});
|
//配送范围回显
|
var pathPolygon = [];
|
var polygonClear;
|
// 构造点标记
|
//为地图注册click事件获取鼠标点击出的经纬度坐标
|
var i = 0;
|
var markerList = [];
|
map.on('click', function (e) {
|
// febs.alert.success('经度：' + e.lnglat.getLng() + '，纬度：' + e.lnglat.getLat());
|
var positonList = [];
|
positonList.push(e.lnglat.getLng());
|
positonList.push(e.lnglat.getLat());
|
i = i +1;
|
var addMaker = new AMap.Marker({
|
map: map,
|
content: '标记'+i,
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
|
position: [positonList[0], positonList[1]],
|
offset: new AMap.Pixel(-13, -30)
|
});
|
markerList.push(addMaker);
|
});
|
|
//为地图注册click事件获取鼠标点击出的经纬度坐标
|
var path = [];
|
var pathStr = "";
|
var lines = [];
|
map.on('click', function (e) {
|
let lngLat = new AMap.LngLat(e.lnglat.getLng(),e.lnglat.getLat());
|
path.push(lngLat);
|
pathStr = pathStr + lngLat+";";
|
console.log(path.toString());
|
console.log(pathStr);
|
var polyline = new AMap.Polyline({
|
path: path,
|
borderWeight: 3, // 线条宽度，默认为 1
|
strokeColor: 'blue', // 线条颜色
|
lineJoin: 'round' // 折线拐点连接处样式
|
})
|
map.add(polyline);
|
lines.push(polyline)
|
document.getElementById("longlatiarr").value=pathStr;
|
});
|
|
form.render();
|
initUserValue();
|
$clearMap.on('click', function (e) {
|
map.remove(lines);
|
lines = []
|
path = []
|
pathStr = ""
|
document.getElementById("longlatiarr").value=pathStr;
|
map.add(lines);
|
|
map.remove(markerList);
|
markerList = [];
|
i = 0;
|
|
map.remove(polygonClear);
|
})
|
function initUserValue() {
|
var marker = new AMap.Marker({
|
position: map.getCenter(),
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
|
anchor:'bottom-center',
|
offset: new AMap.Pixel(0, 0)
|
});
|
|
marker.setMap(map);
|
|
// 设置鼠标划过点标记显示的文字提示
|
marker.setTitle('团长位置');
|
|
// 设置label标签
|
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
|
marker.setLabel({
|
direction:'right',
|
offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
|
content: "<div class='info'>团长位置</div>", //设置文本标注内容
|
});
|
|
//配送范围回显
|
// var pathPolygon = [];
|
let fenceLongLat = leaderInfo.longlatiarr;
|
if(fenceLongLat != '' && fenceLongLat != null){
|
let splitList = [];
|
splitList = fenceLongLat.split(';');
|
if(splitList.length > 0){
|
for(let splitIndex = 0;splitIndex < splitList.length-1;splitIndex++){
|
let splitLngLat = splitList[splitIndex].split(',');
|
console.log(splitLngLat[0]);
|
console.log(splitLngLat[1]);
|
let lngLat = new AMap.LngLat(splitLngLat[0],splitLngLat[1]);
|
pathPolygon.push(lngLat)
|
}
|
}
|
var polygon = new AMap.Polygon({
|
path: pathPolygon,
|
fillColor: '#00B2D5', // 多边形填充颜色
|
fillOpacity : 0.5, // 多边形填充透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5
|
strokeStyle : 'dashed', // 轮廓线样式，实线:solid，虚线:dashed
|
borderWeight: 2, // 线条宽度，默认为 1
|
strokeColor: 'green', // 线条颜色
|
});
|
polygonClear = polygon;
|
map.add(polygon);
|
}
|
|
form.val("user-addLeaderFence-form", {
|
"id": leaderInfo.id,
|
"memberId": leaderInfo.memberId,
|
"name": leaderInfo.name,
|
"addressArea": leaderInfo.addressArea,
|
"detailAddress": leaderInfo.detailAddress,
|
"longitude": leaderInfo.longitude,
|
"latitude": leaderInfo.latitude,
|
"longlatiarr": leaderInfo.longlatiarr,
|
"phone": leaderInfo.phone
|
});
|
}
|
|
form.on('submit(user-addLeaderFence-submit)', function (data) {
|
febs.post(ctx + 'admin/leader/addFence', data.field, function () {
|
layer.closeAll();
|
febs.alert.success('操作成功');
|
$('#febs-leader').find('#reset').click();
|
});
|
return false;
|
});
|
});
|
</script>
|
