140 lines
5.3 KiB
HTML
140 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<base th:href="${#request.getContextPath() + '/'}">
|
|
<meta charset="utf-8">
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
|
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
|
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
|
<style>
|
|
.layui-form-label-up {width: 100% !important; height: 30px !important; line-height: 30px !important; border: none !important; padding: 0px !important; font-size: 15px; background-color: transparent !important; text-align: left !important;}
|
|
.layui-input-block-down {margin: 0px !important; left: 0px !important;}
|
|
.layui-input-block-down .layui-form-select .layui-edge {top: 74%;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layui-anim layui-anim-fadein">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body" style="padding: 15px;">
|
|
<form class="layui-form layui-form-pane" lay-filter="dataForm">
|
|
<div id="baiduMapContainer"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=mlfOah4gWM1FjEo9CmlI64zK6MhyiMPW"></script>
|
|
<script type="text/javascript" src="assets/js/baidu-map/baidu-map-1.0.0.min.js"></script>
|
|
<script src="assets/layuiadmin/layui/layui.js"></script>
|
|
<script src="assets/js/layui-select.js"></script>
|
|
<script th:inline="javascript">
|
|
layui.config({
|
|
base: 'assets/layuiadmin/' //静态资源所在路径
|
|
}).extend({
|
|
index: 'lib/index' //主入口模块
|
|
}).use(['index', 'form', 'laydate', 'laytpl'], function(){
|
|
var $ = layui.$;
|
|
var $win = $(window);
|
|
var form = layui.form;
|
|
var laytpl = layui.laytpl;
|
|
var laydate = layui.laydate;
|
|
var layuiSelect = new LayuiSelect(layui);
|
|
var queryParams = top.restAjax.params(window.location.href);
|
|
var gridId = queryParams.gridId;
|
|
var streetId = queryParams.streetId;
|
|
var communityId = queryParams.communityId;
|
|
var housingEstateId = queryParams.housingEstateId;
|
|
var centerPoint = {
|
|
lng: [[${mapLng}]],
|
|
lat: [[${mapLat}]],
|
|
}
|
|
|
|
var baiduMap = null;
|
|
var gridMember = {
|
|
users: [],
|
|
gridArray: []
|
|
}
|
|
var selectedAreaArray = [];
|
|
|
|
function closeBox() {
|
|
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
|
}
|
|
|
|
// 初始化网格背景
|
|
function initGridBG(callback) {
|
|
var layIndex;
|
|
top.restAjax.get(top.restAjax.path('api/grid/list-all-with-point', []), {
|
|
streetId: streetId,
|
|
communityId: communityId,
|
|
housingEstateId: housingEstateId
|
|
}, null, function(code, data) {
|
|
var gridArray = [];
|
|
for(var i = 0, item; item = data[i++];) {
|
|
var pointArray = [];
|
|
for(var j = 0, jItem; jItem = item.pointArray[j++];) {
|
|
pointArray.push(new BaiduMap.Point(jItem.lng, jItem.lat));
|
|
}
|
|
gridArray.push({
|
|
id: item.gridId,
|
|
label: item.gridName,
|
|
fillColor: item.fillColor,
|
|
pointArray: pointArray
|
|
})
|
|
}
|
|
|
|
baiduMap.initBackgroundGrid({
|
|
gridArray: gridArray
|
|
});
|
|
|
|
callback ? callback() : '';
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
}, function () {
|
|
layIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
|
}, function () {
|
|
top.dialog.close(layIndex);
|
|
});
|
|
}
|
|
|
|
function initMap(callback) {
|
|
$('#baiduMapContainer').css({
|
|
width: '100%',
|
|
height: ($win.height() - 30) +'px'
|
|
});
|
|
baiduMap = new BaiduMap('baiduMapContainer', {
|
|
single: true,
|
|
onGridStartEdit: function(baiduMap) {
|
|
$('#confirmBtn').hide();
|
|
},
|
|
onGridStopEdit: function(gridArray) {
|
|
gridMember.gridArray = gridArray;
|
|
$('#confirmBtn').show();
|
|
}
|
|
});
|
|
baiduMap.setCenterAndZoom(centerPoint, 14);
|
|
var mapTypeControl = new BMap.MapTypeControl({
|
|
mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
|
|
});
|
|
baiduMap.getMap().addControl(mapTypeControl);
|
|
baiduMap.setDefaultConfig();
|
|
baiduMap.initGridOptionEvent();
|
|
baiduMap.initColorOption();
|
|
callback ? callback() : '';
|
|
}
|
|
|
|
// 初始化内容
|
|
function initData() {
|
|
initMap(function() {
|
|
initGridBG();
|
|
});
|
|
}
|
|
initData();
|
|
|
|
// 校验
|
|
form.verify({});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |