@{
ViewBag.title = "地图导航";
}
@model YT.XWAJ.Public.Application.MapNavigation.Dto.MapNavigationManagementDto
<div class="easyui-layout" data-options="fit: true,border: false">
<div data-options="region:‘north‘" style="height:80px">
<div class="form-show">
<div class="form" style="width: 100%;overflow:auto; padding:10px 15px 5px;">
<form id="form" method="post">
<div class="form-row col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="form-row col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="form-title">导航名称<span class="red"></span></div>
<div class="form-value">
<input class="easyui-validatebox form-control" type="text" name="MapNavigationName" value="@Model.MapNavigationName" />
</div>
</div>
<div class="form-row col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="form-title">排序<span class="red"></span></div>
<div class="form-value">
<input class="easyui-validatebox form-control" type="number" name="Sort" value="@Model.Sort" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div region="center">
<!--地图-->
<div id="mmap" style="width: 100%;height: 100%;" param="tileUrl:googleWeb;bounds:67.5 0 157.5 67.5;backgroundColor:#FFFEE9;zoom:5;sliceZoom:5;maxZoom:19;minZoom:5;fullZoom:5;mapTilesWidth:2048;mapTilesHeight:1536;errorImg:/scripts/webgis/mxImg/blank.png;mapTilesExtendPixel:0"></div>
</div>
<div data-options="region: ‘south‘,height: 45">
<div class="form-row dlgButRow">
<div class="pull-left">
<input type="checkbox" id="chked" checked="checked" class="chk" />确认并关闭窗口
</div>
<div class="pull-right">
<a href="javascript:void(0)" class="btn btn-success" onclick="javascript: window.page.onSave();"><span class="icon icon-save"></span>保存</a>
<a href="javascript:void(0)" class="btn btn-default" onclick="javascript: window.page.close();"><i class="icon icon-remove"></i>关闭</a>
</div>
</div>
</div>
</div>
@section scripts
{
<script src="/scripts/jquery/jquery-1.11.3.min.js"></script>
<script src="/scripts/common/base.js"></script>
<!-- 地图 -->
<script src="/scripts/webgis/mxlib/MapHost.js"></script>
<script src="/scripts/webgis/mxlib/snap.svg-min.js"></script>
<script src="/scripts/webgis/mxlib/api.min.js"></script>
<script src="/scripts/webgis/mxlib/Mapv.min.js"></script>
<script src="/scripts/webgis/mxlib/RectSearchCmd.js"></script>
<script src="/scripts/map/mapApi.js"></script>
<script src="/visualization/js/map.js"></script>
<script type="text/javascript">
(function () {
var config = {
/*是否显示CAD*/
showCAD: false,
/*地图显示模型*/
mapModel: ‘satellite‘, //"web","satellite","proCad"
/*地图初始参数*/
mapParams: {
x: 119.47353798201721, y: 36.84729076181995,
zoom: 12, maxZoom: 14,
control: { enabled: true, position: MX_ANCHOR_TOP_LEFT }
},
labelStyle: {
background: ‘transparent‘,
color: "#33ffbb",
fontSize: "16px",
border: ‘0px solid #ccc‘,
height: "20px",
lineHeight: "20px",
fontFamily: "微软雅黑"
},
markerType: {
sensor: "传感器",
video: "视频",
enterprise: "企业",
danger: "危化品",
hazard: "危险源",
shelter: "避难场所",
firehouse: "消防队",
medical: "医疗机构",
communication: "通讯保障",
technique: "技术支持",
transport: "运输保障"
}
};
var page = {
load: function () {
page.initMap();//显示地图
},
//创建和初始化地图函数：
initMap:function () {
var maps = page.maps = new visualMap({
el: ‘mmap‘,
mapParams: config.mapParams,
showCAD: config.showCAD,
labelStyle: config.labelStyle,
markerType: config.markerType,
mapModel: config.mapModel
});
},
//保存
onSave: function () {
//获取中心点及缩放级别
var zoom = page.maps.maps._map.getZoom(),
centerPoint = page.maps.maps._map.getCenter();
//console.log(zoom);
//console.log(centerPoint);
var data = $("#form").serializeArray();
data.push(
{
name: ‘Hierarchy‘,
value:zoom
},{
name: "CentraLongitude",
value: centerPoint.x
}, {
name: "CenterLatitude",
value: centerPoint.y
}
);
console.log(data);
/*
$.post(‘/api/services/public/mapNavigation/EditMapNavigationManagement‘,
{
MapNavigationName: $(‘input[name="MapNavigationName"]‘).val(),
CentraLongitude: centerPoint.x,
CenterLatitude: centerPoint.y,
Hierarchy: zoom,
Sort: $(‘input[name="Sort"]‘).val()
},
function (result) {
$.closeParentWindow();
});
*/
$.ajax({
type: "POST",
url: ‘/api/services/public/mapNavigation/EditMapNavigationManagement‘,
data: data,
success: function (result) {
$.closeParentWindow();
}
});
},
//刷新
onRefresh: function() {
$("#datagrid").datagrid(‘reload‘);
},
//取消
close: function () {
$.closeParentWindow();
}
};
$(page.load);
window.page = page;
}());
</script>
}
上边代码无法正常运行。
但是期间遇到一个问题：就是页面只把表单中的数据遍历了，地图中获取的值没有传回后台， 因此我们有两种办法可以实现将值传回后台： 方法如下
1、这种方式如果穿的之多的情况下 不太好。
$.post(‘/api/services/public/mapNavigation/EditMapNavigationManagement‘,
{
MapNavigationName: $(‘input[name="MapNavigationName"]‘).val(),
CentraLongitude: centerPoint.x,
CenterLatitude: centerPoint.y,
Hierarchy: zoom,
Sort: $(‘input[name="Sort"]‘).val()
},
function (result) {
$.closeParentWindow();
});
2、下边的方法是给data.push元素 以下push了三个对象。 （需看接口返回的格式）
//保存
onSave: function () {
//获取中心点及缩放级别
var zoom = page.maps.maps._map.getZoom(),
centerPoint = page.maps.maps._map.getCenter();
//console.log(zoom);
//console.log(centerPoint);
var data = $("#form").serializeArray();
data.push(
{
name: ‘Hierarchy‘,
value:zoom
},{
name: "CentraLongitude",
value: centerPoint.x
}, {
name: "CenterLatitude",
value: centerPoint.y
}
);
console.log(data);
$.ajax({
type: "POST",
url: ‘/api/services/public/mapNavigation/EditMapNavigationManagement‘,
data: data,
success: function (result) {
$.closeParentWindow();
}
});
}
以上代码均可实现给表单添加对象元素。
时间： 2024-10-19 00:14:03