@layout("/common/_container.html"){
|
<div class="ibox float-e-margins">
|
<div class="ibox-content">
|
<div class="form-horizontal" id="openCityForm">
|
|
<input type="hidden" id="id" name="id" value="${item.id}">
|
<input type="hidden" id="content" name="content" value='${item.content}'>
|
<div class="row">
|
<div class="col-sm-10">
|
@if(language==1){
|
<#input id="chineseName" name="中文城市名称" value="${item.chineseName}" />
|
<#input id="englishName" name="英文城市名称" value="${item.englishName}" />
|
<#input id="indonesianName" name="印尼文城市名称" value="${item.indonesianName}" />
|
<div class="form-group">
|
<label class="col-sm-3 control-label">服务范围：</label>
|
<div class="col-sm-9">
|
<div id="map" style="height: 500px;width: 100%;"></div>
|
</div>
|
</div>
|
@}
|
@if(language==2){
|
<#input id="chineseName" name="Chinese city name" value="${item.chineseName}" />
|
<#input id="englishName" name="English city name" value="${item.englishName}" />
|
<#input id="indonesianName" name="City name in Indonesian" value="${item.indonesianName}" />
|
<div class="form-group">
|
<label class="col-sm-3 control-label">Service scope：</label>
|
<div class="col-sm-9">
|
<div id="map" style="height: 500px;width: 100%;"></div>
|
</div>
|
</div>
|
@}
|
@if(language==3){
|
<#input id="chineseName" name="Nama kota dalam bahasa cina" value="${item.chineseName}" />
|
<#input id="englishName" name="Nama kota dalam bahasa inggris" value="${item.englishName}" />
|
<#input id="indonesianName" name="Nama kota indonesia" value="${item.indonesianName}" />
|
<div class="form-group">
|
<label class="col-sm-3 control-label">Rentang layanan：</label>
|
<div class="col-sm-9">
|
<div id="map" style="height: 500px;width: 100%;"></div>
|
</div>
|
</div>
|
@}
|
@if(language==1){
|
<div class="form-group">
|
<label class="col-sm-3 control-label">经营业务：</label>
|
<div class="col-sm-3">
|
<select class="form-control" id="businessType">
|
<option value="">选择经营业务</option>
|
<option value="1">摩托车</option>
|
<option value="4">同城快送</option>
|
</select>
|
</div>
|
<div class="col-sm-3" >
|
<#input id="businessSort" name="排序" value="" />
|
</div>
|
<div class="col-sm-2">
|
<#button btnCss="info" name="添加" id="ensure" icon="fa-check" clickFun="addBusinessType()"/>
|
</div>
|
</div>
|
@}
|
@if(language==2){
|
<div class="form-group">
|
<label class="col-sm-3 control-label">carry on business：</label>
|
<div class="col-sm-3">
|
<select class="form-control" id="businessType">
|
<option value="">Choosing to run a business</option>
|
<option value="1">Motorcycle</option>
|
<option value="4">City express delivery</option>
|
</select>
|
</div>
|
<div class="col-sm-3" >
|
<#input id="businessSort" name="Sort" value="" />
|
</div>
|
<div class="col-sm-2">
|
<#button btnCss="info" name="Add" id="ensure" icon="fa-check" clickFun="addBusinessType()"/>
|
</div>
|
</div>
|
@}
|
@if(language==3){
|
<div class="form-group">
|
<label class="col-sm-3 control-label">Bisnis operasi：</label>
|
<div class="col-sm-3">
|
<select class="form-control" id="businessType">
|
<option value="">Pilih bisnis</option>
|
<option value="1">sepeda motor</option>
|
<option value="4">Pengiriman ekspres lokal</option>
|
</select>
|
</div>
|
<div class="col-sm-3" >
|
<#input id="businessSort" name="Sort" value="" />
|
</div>
|
<div class="col-sm-2">
|
<#button btnCss="info" name="tambah ke" id="ensure" icon="fa-check" clickFun="addBusinessType()"/>
|
</div>
|
</div>
|
@}
|
|
|
@if(language==1){
|
<div class="form-group">
|
<label class="col-sm-3 control-label">已添加经营业务</label>
|
<div class="col-sm-9">
|
<div style="height: 200px; border: 1px solid #e5e6e7;overflow-y: auto;">
|
<table class="table table-striped table-bordered table-hover table-condensed">
|
<thead>
|
<tr>
|
<th style="width: 300px;">添加时间</th>
|
<th style="width: 300px;">经营业务</th>
|
<th style="width: 300px;">排序</th>
|
<th style="width: 100px;">操作</th>
|
</tr>
|
</thead>
|
<tbody id="coun">
|
@for(obj in businessList){
|
<tr class="timeClass">
|
<td>
|
<input type="hidden" id="busId" name="busId" value="${obj.id}">
|
<input type="hidden" id="time" name="time" value="${obj.insertTimeStr}">${obj.insertTimeStr}</td>
|
<td><input type="hidden" id="type" name="type" value="${obj.businessTypeStr}">${obj.businessTypeStr}</td>
|
<td><input type="hidden" id="sort" name="sort" value="${obj.sort}">${obj.sort}</td>
|
<td><button onclick="deleteSub(this)">移除</button></td></td>
|
</tr>
|
@}
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
@}
|
@if(language==2){
|
<div class="form-group">
|
<label class="col-sm-3 control-label">Business has been added</label>
|
<div class="col-sm-9">
|
<div style="height: 200px; border: 1px solid #e5e6e7;overflow-y: auto;">
|
<table class="table table-striped table-bordered table-hover table-condensed">
|
<thead>
|
<tr>
|
<th style="width: 300px;">add time</th>
|
<th style="width: 300px;">carry on business</th>
|
<th style="width: 300px;">sort</th>
|
<th style="width: 100px;">operation</th>
|
</tr>
|
</thead>
|
<tbody id="coun">
|
@for(obj in businessList){
|
<tr class="timeClass">
|
<td>
|
<input type="hidden" id="busId" name="busId" value="${obj.id}">
|
<input type="hidden" id="time" name="time" value="${obj.insertTimeStr}">${obj.insertTimeStr}</td>
|
<td><input type="hidden" id="type" name="type" value="${obj.businessTypeStr}">${obj.businessTypeStr}</td>
|
<td><input type="hidden" id="sort" name="sort" value="${obj.sort}">${obj.sort}</td>
|
<td><button onclick="deleteSub(this)">Remove</button></td></td>
|
</tr>
|
@}
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
@}
|
@if(language==3){
|
<div class="form-group">
|
<label class="col-sm-3 control-label">Bisnis ditambah</label>
|
<div class="col-sm-9">
|
<div style="height: 200px; border: 1px solid #e5e6e7;overflow-y: auto;">
|
<table class="table table-striped table-bordered table-hover table-condensed">
|
<thead>
|
<tr>
|
<th style="width: 300px;">Tambah Waktu</th>
|
<th style="width: 300px;">Bisnis operasi</th>
|
<th style="width: 300px;">Sort</th>
|
<th style="width: 100px;">Operasi</th>
|
</tr>
|
</thead>
|
<tbody id="coun">
|
@for(obj in businessList){
|
<tr class="timeClass">
|
<td>
|
<input type="hidden" id="busId" name="busId" value="${obj.id}">
|
<input type="hidden" id="time" name="time" value="${obj.insertTimeStr}">${obj.insertTimeStr}</td>
|
<td><input type="hidden" id="type" name="type" value="${obj.businessTypeStr}">${obj.businessTypeStr}</td>
|
<td><input type="hidden" id="sort" name="sort" value="${obj.sort}">${obj.sort}</td>
|
<td><button onclick="deleteSub(this)">Remove</button></td></td>
|
</tr>
|
@}
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
@}
|
|
|
</div>
|
</div>
|
|
<div class="row btn-group-m-t">
|
<div class="col-sm-10 col-sm-offset-5">
|
@if(language==1){
|
<#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="TOpenCityInfoDlg.editSubmit()"/>
|
<#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="TOpenCityInfoDlg.close()"/>
|
@}
|
@if(language==2){
|
<#button btnCss="info" name="Submit" id="ensure" icon="fa-check" clickFun="TOpenCityInfoDlg.editSubmit()"/>
|
<#button btnCss="danger" name="Cancel" id="cancel" icon="fa-eraser" clickFun="TOpenCityInfoDlg.close()"/>
|
@}
|
@if(language==3){
|
<#button btnCss="info" name="Kirim" id="ensure" icon="fa-check" clickFun="TOpenCityInfoDlg.editSubmit()"/>
|
<#button btnCss="danger" name="Batal" id="cancel" icon="fa-eraser" clickFun="TOpenCityInfoDlg.close()"/>
|
@}
|
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnvS7Xm3utDjc2fdd5Gvk5E1-bavcrzAA&libraries=drawing&callback=initMap"></script>
|
<script src="${ctxPath}/modular/system/tOpenCity/tOpenCity_info.js"></script>
|
<script type="text/javascript">
|
// This example requires the Drawing library. Include the libraries=drawing
|
// parameter when you first load the API. For example:
|
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
|
const content$ = $('#content').val();
|
let content_latLng = (null == content$ || '' == content$) ? [] : JSON.parse(content$);
|
let drawingManager = null;
|
let map;
|
function initMap() {
|
map = new google.maps.Map(document.getElementById("map"), {
|
center: { lat: -6.9174639, lng: 107.6191228 },
|
zoom: 8,
|
});
|
drawingManager = new google.maps.drawing.DrawingManager({
|
drawingMode: google.maps.drawing.OverlayType.MARKER,
|
drawingControl: true,
|
drawingControlOptions: {
|
position: google.maps.ControlPosition.TOP_CENTER,
|
drawingModes: [
|
google.maps.drawing.OverlayType.POLYGON,
|
// google.maps.drawing.OverlayType.CIRCLE,
|
],
|
},
|
circleOptions: {
|
fillColor: "#8ab4f8",
|
fillOpacity: 0.5,
|
strokeWeight: 1,
|
clickable: false,
|
draggable: true,
|
editable: true,
|
zIndex: 1,
|
},
|
polygonOptions: {
|
fillColor: "#8ab4f8",
|
fillOpacity: 0.5,
|
strokeWeight: 1,
|
clickable: false,
|
draggable: true,
|
editable: true,
|
zIndex: 1,
|
}
|
});
|
|
drawingManager.setMap(map);
|
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON)
|
//圆形完成监听
|
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
|
circle.id = Date.now();
|
let center = circle.getCenter();//中心点坐标
|
let lat = center.lat();//纬度
|
let lng = center.lng();//经度
|
let radius = circle.getRadius();//半径（米）
|
content_latLng.push({
|
id: circle.id,
|
type: 'circle',
|
center: lat + "," + lng,
|
radius: radius
|
})
|
|
//圆形半径修改监听
|
google.maps.event.addListener(circle, 'radius_changed', function() {
|
edit_circle(circle);
|
});
|
//圆形中心修改监听
|
google.maps.event.addListener(circle, 'center_changed', function() {
|
edit_circle(circle);
|
});
|
});
|
|
//多边形完成监听
|
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
|
polygon.id = Date.now();
|
polygon.getPaths().forEach(function (element, index) {
|
let arr = [];
|
for(let i in element.g){
|
let lat = element.g[i].lat();//纬度
|
let lng = element.g[i].lng();//经度
|
arr.push(lat + "," + lng)
|
}
|
arr.push(element.g[0].lat() + "," + element.g[0].lng());
|
content_latLng.push({
|
id: polygon.id,
|
type: 'polygon',
|
center: arr,
|
})
|
});
|
//多边形修改监听
|
polygon.getPath().addListener("insert_at", function() {
|
edit_polygon(polygon);
|
})
|
//多边形修改监听
|
polygon.getPath().addListener("remove_at", function() {
|
edit_polygon(polygon);
|
})
|
//多边形修改监听
|
polygon.getPath().addListener("set_at", function() {
|
edit_polygon(polygon);
|
})
|
});
|
|
|
|
for(let i in content_latLng){
|
let fence = content_latLng[i];
|
if(fence.type == 'circle'){
|
let latlng = fence.center;
|
let lat = parseFloat(latlng.split(",")[0]);
|
let lng = parseFloat(latlng.split(",")[1]);
|
let radius = fence.radius;
|
const cityCircle = new google.maps.Circle({
|
id: fence.id,
|
fillColor: "#8ab4f8",
|
fillOpacity: 0.5,
|
strokeWeight: 1,
|
clickable: false,
|
draggable: true,
|
editable: true,
|
zIndex: 1,
|
center: new google.maps.LatLng(lat, lng),
|
radius: radius
|
});
|
cityCircle.setMap(map);
|
|
//圆形半径修改监听
|
google.maps.event.addListener(cityCircle, 'radius_changed', function() {
|
edit_circle(cityCircle);
|
});
|
//圆形中心修改监听
|
google.maps.event.addListener(cityCircle, 'center_changed', function() {
|
edit_circle(cityCircle);
|
});
|
}
|
if(fence.type == 'polygon'){
|
let paths = [];
|
for(let j in fence.center){
|
paths.push({
|
lat: parseFloat(fence.center[j].split(",")[0]),
|
lng: parseFloat(fence.center[j].split(",")[1])
|
});
|
}
|
const bermudaTriangle = new google.maps.Polygon({
|
id: fence.id,
|
fillColor: "#8ab4f8",
|
fillOpacity: 0.5,
|
strokeWeight: 1,
|
clickable: false,
|
draggable: true,
|
editable: true,
|
zIndex: 1,
|
paths: paths
|
});
|
|
bermudaTriangle .setMap(map);
|
//多边形修改监听
|
bermudaTriangle.getPath().addListener("insert_at", function() {
|
edit_polygon(bermudaTriangle);
|
})
|
//多边形修改监听
|
bermudaTriangle.getPath().addListener("remove_at", function() {
|
edit_polygon(bermudaTriangle);
|
})
|
//多边形修改监听
|
bermudaTriangle.getPath().addListener("set_at", function() {
|
edit_polygon(bermudaTriangle);
|
})
|
|
}
|
}
|
|
};
|
|
|
|
window.initMap = initMap;
|
|
|
$('input[name="patternType"]').on('click', function () {
|
let patternType_value = $(this).val();
|
if(patternType_value == 1){
|
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON)
|
}else{
|
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.CIRCLE)
|
}
|
})
|
|
|
function edit_polygon(polygon) {
|
for(let i in content_latLng){
|
let fence = content_latLng[i];
|
if(fence.type == 'polygon'){
|
if(fence.id == polygon.id){
|
polygon.getPaths().forEach(function (element, index) {
|
let arr = [];
|
for(let i in element.g){
|
let lat = element.g[i].lat();//纬度
|
let lng = element.g[i].lng();//经度
|
arr.push(lat + "," + lng)
|
}
|
arr.push(element.g[0].lat() + "," + element.g[0].lng())
|
content_latLng[i] = {
|
id: polygon.id,
|
type: 'polygon',
|
center: arr,
|
}
|
});
|
}
|
}
|
}
|
}
|
|
|
function edit_circle(circle) {
|
for(let i in content_latLng){
|
let fence = content_latLng[i];
|
if(fence.type == 'circle'){
|
if(fence.id == circle.id){
|
let center = circle.getCenter();//中心点坐标
|
let lat = center.lat();//纬度
|
let lng = center.lng();//经度
|
let radius = circle.getRadius();//半径（米）
|
content_latLng[i] = {
|
id: circle.id,
|
type: 'circle',
|
center: lat + "," + lng,
|
radius: radius
|
}
|
}
|
}
|
}
|
}
|
</script>
|
@}
|
