@layout("/common/_container.html"){
|
<div class="ibox float-e-margins">
|
<div class="ibox-content">
|
<div class="form-horizontal" id="openCityForm">
|
|
<div class="row">
|
<div class="col-sm-10">
|
@if(language==1){
|
<#input id="chineseName" name="中文城市名称" value="" />
|
<#input id="englishName" name="英文城市名称" value="" />
|
<#input id="indonesianName" name="印尼文城市名称" value="" />
|
<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="" />
|
<#input id="englishName" name="English city name" value="" />
|
<#input id="indonesianName" name="City name in Indonesian" value="" />
|
<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="" />
|
<#input id="englishName" name="Nama kota dalam bahasa inggris" value="" />
|
<#input id="indonesianName" name="Nama kota indonesia" value="" />
|
<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">melanjutkan bisnis：</label>
|
<div class="col-sm-3">
|
<select class="form-control" id="businessType">
|
<option value="">Memilih untuk menjalankan bisnis</option>
|
<option value="1">Motosikal</option>
|
<option value="4">Pengiriman ekspres kota</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" id="ensure" icon="fa-check" clickFun="addBusinessType()"/>
|
</div>
|
</div>
|
@}
|
|
<div class="form-group">
|
@if(language==1){
|
<label class="col-sm-3 control-label">已添加经营业务</label>
|
@}
|
@if(language==2){
|
<label class="col-sm-3 control-label">Business has been added</label>
|
@}
|
@if(language==3){
|
<label class="col-sm-3 control-label">Bisnis telah 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>
|
@if(language==1){
|
<th style="width: 300px;">添加时间</th>
|
<th style="width: 300px;">经营业务</th>
|
<th style="width: 300px;">排序</th>
|
<th style="width: 100px;">操作</th>
|
@}
|
@if(language==2){
|
<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>
|
@}
|
@if(language==3){
|
<th style="width: 300px;">tambah waktu</th>
|
<th style="width: 300px;">melanjutkan bisnis</th>
|
<th style="width: 300px;">sort</th>
|
<th style="width: 100px;">operasi</th>
|
@}
|
|
</tr>
|
</thead>
|
<tbody id="coun">
|
|
</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.addSubmit()"/>
|
<#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.addSubmit()"/>
|
<#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.addSubmit()"/>
|
<#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">
|
let content_latLng = [];
|
let drawingManager = null;
|
function initMap() {
|
const 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,
|
editable: true,
|
zIndex: 1,
|
},
|
polygonOptions: {
|
fillColor: "#8ab4f8",
|
fillOpacity: 0.5,
|
strokeWeight: 1,
|
clickable: false,
|
editable: true,
|
zIndex: 1,
|
},
|
rectangleOptions: {
|
fillColor: "#8ab4f8",
|
fillOpacity: 0.5,
|
strokeWeight: 1,
|
clickable: false,
|
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(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,
|
})
|
});
|
});
|
}
|
|
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)
|
}
|
})
|
</script>
|
@}
|
