addstation_select.html
6.14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!-- 选择Station add method -->
<div class="modal fade" id="addstation_select_mobal" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Station add method
<i class="fa fa-question-circle tipso-animation" style="color: rgba(158, 158, 158, 0.49);"></i>
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/" method="post" id="formBootbox" role="form">
<div class="alert alert-danger display-hide" id="requiredname">
<button class="close" data-close="alert"></button>
Station name is required
</div>
<!-- 站点名称 -->
<div class="form-group" id="formRequ">
<label class="col-md-3 control-label"><span class="required"> * </span>Station name</label>
<div class="col-md-9">
<input type="text" class="form-control input-medium" id="stationNamebootboxInput" name="stationNamebootbox">
</div>
</div>
<!-- Add method -->
<div class="form-group">
<label class="col-md-3 control-label">Add method</label>
<div class="col-md-9">
<div class="icheck-list">
<label>
<input type="radio" class="icheck" name="baseRes" value=0 checked> System generation
</label>
<label >
<input type="radio" class="icheck" name="baseRes" value=1 > Manual drawing
</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="addSelectnextButton">Next</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#addstation_select_mobal').on('AddSelectMobal.show', function(e,map_,drw,ajaxd_,editRoute,fun){
var stationObj = {};
// 加载显示mobal
$('#addstation_select_mobal').modal({show : true,backdrop: 'static', keyboard: false});
setTimeout(function(){
var offsetY = $('.modal-dialog').offset().top-3 ,
offsetX = $('.modal-dialog').offset().left-10 ;
$('.tipso-animation').tipso({
speed : 100,
background : '#0ed0e8',
color : '#ffffff',
position :'right',
width : 390,
delay : 400,
animationIn : 'bounceIn',
animationOut : 'bounceOut',
offsetX : -(offsetX),
offsetY : -(offsetY),
content :'<span style="display:block; float:left;font-size:x-small;line-height:10px;text-transform:none;">A)System generation: Automatically generate a circle with a radius of 100 meters based on the station name</span></br>'+
'<span style="display:block; float:left;font-size:x-small;text-transform:none;">B)Manual drawing: draw the station range on the map manually,then double-click the right mouse button to save</span>',
});
$('.tipso-animation').tipso('show');
setTimeout(function(){$('.tipso-animation').tipso('hide');},4000);
},500);
// 获取表单元素
var form = $('#formBootbox');
// 错误提示元素
var requiredname = $('#requiredname', form);
// Next点击事件
$('#addSelectnextButton').on('click', function() {
// 表单提交
form.submit();
});
// 表单验证
form.validate({
errorElement : 'span',
errorClass : 'help-block help-block-error',
focusInvalid : false,
rules : {
'stationNamebootbox' : {required : true,maxlength : 50}// 必填项 最大长度为50
},
invalidHandler : function(event, validator) {
requiredname.show();
App.scrollTo(requiredname, -200);
},
highlight : function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight : function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
success : function(label) {
label.closest('.form-group').removeClass('has-error');
},
submitHandler : function(f) {
// 隐藏错误提示
requiredname.hide();
// 表单序列化
var params = form.serializeJSON();
var stationName = params.stationNamebootbox;
// 获取新增站点方式
var baseRes = params.baseRes;
/** 设置新增站点对象站点名称属性值 @param:<stationName:站点名称）> */
stationObj.stationNamebootbox = stationName;
// 系统生成
if(baseRes == 0) {
/** 根据站点位置获取坐标 @parma:<stationName:站点名称；callback:返回函数> */
map_.localSearchFromAdreesToPoint(stationName,function(Points) {
if(Points) {
/** 设置新增站点集合对象站点中心点百度坐标属性值 @param:<bJwpoints:中心点百度坐标） */
stationObj.bJwpoints = Points;
/** 设置新增站点集合对象范围图形类型属性值 @param:<shapesType:范围图形类型） */
stationObj.shapesType = 'r';
/** 设置新增站点集合对象Circle radius属性值 @param:<radius:Circle radius） */
stationObj.radius = 100;
/** 设置新增站点集合对象图形百度坐标集合属性值 @param:<bPolygonGrid:图形百度坐标集合） */
stationObj.bPolygonGrid = '';
// 以藏Station add methodmobal
$('#addstation_select_mobal').modal('hide');
// 加载add页面
$.get('addstation.html', function(m){
$(pjaxContainer).append(m);
$('#add_station_mobal').trigger('AddStationMobal.show', [map_,ajaxd_,stationObj,editRoute,fun]);
});
}else {
// 返回坐标为空
layer.confirm('【The coordinates cannot generate, please select other methods to add】', {btn : [ 'Back' ],icon: 3, title:'Tip' }, function(index){
layer.close(index);
});
}
});
}else if(baseRes==1) {
// 关闭按钮事件
fun.addAChangeCssAddDisabled();
map_.clearMarkAndOverlays();
// 以藏Station add methodmobal
$('#addstation_select_mobal').modal('hide');
// 打开绘制工具
$('.leftUtils').removeClass('hidden');
drw.openPointDrawingManager(stationObj,'add');
drw.drawingManagerClose();
map_.localtionPoint(stationName);
}
}
});
});
</script>