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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<?php
/**
* 学校管理编辑
* $Id: school_edit.php,v 1.1 2020/01/03 11:18:46 Exp $
* @author lixq
* @package manager.public_html
**/
?>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=<?=LBS_KEY?>"></script>
<style type="text/css">
#container{
width: 600px;
height: 400px;
}
</style>
<div id="change">
<p class="edit_title">学校编辑</p>
<form id="form" action="school_edit_result.php" method="post" enctype="multipart/form-data">
<div class="edit_content">
<p>学校名称</p>
<p class="begin_blank"><?=htmlspecialchars($school_mst->title) ?></p>
<p>学校类型</p>
<p class="begin_blank"><?=SchoolType::getTitleById($school_mst->school_type) ?> </p>
<p>学校封面图</p>
<p class="begin_blank">
<div >
<input id="image_file" name="front_image" type="file" accept="image/*"/>
</div>
<div >
<img id="imgshow" src="<?=$school_mst->front_image?>" height="150px" alt="学校封面图" />
</div>
</p>
<p>学校介绍</p>
<textarea v-model="comment" name="comment" rows="10"></textarea><br />
<p>学校地址</p>
<textarea v-model="address" id="address" name="address" rows="5" readonly="readonly"></textarea><br />
<!-- 地图显示容器 -->
<!-- 定义地图显示容器 -->
在地图上选择地址以更改学校地址
<div id="container"></div>
<input name="province" type="hidden" value="<?=$school_mst->province?>">
<input name="city" type="hidden" value="<?=$school_mst->city?>">
<input name="district" type="hidden" value="<?=$school_mst->district?>">
<input name="street" type="hidden" value="<?=$school_mst->street?>">
<input name="longitude" type="hidden" value="<?=$school_mst->longitude?>">
<input name="latitude" type="hidden" value="<?=$school_mst->latitude?>">
<input name="id" type="hidden" value="<?=$school_mst->id?>">
<br/><br/>
<el-button type="danger" @click="edit()" class="edit_btn">编辑</el-button>
<?if($can_back){?>
<el-button type="danger" @click="back()" class="edit_btn">返回</el-button>
<?}?>
<br/><br/>
</div>
</form>
</div>
<script type="text/javascript">
new Vue({
el:'#change',
data:{
id:<?=$id?>,
name:'<?=htmlspecialchars($school_mst->title) ?>',
address:'<?=$school_mst->address ?>',
comment:'<?=$school_mst->comment?>',
},
methods:{
edit:function(){
if(!this.comment){
this.$message({
type: 'error',
message: '请输入学校介绍!'
});
return;
}
$('#form').submit();
},
back:function(){
window.history.go(-1);
}
}
})
</script>
<script>
window.onload = function(){
//初始化地图函数
function init() {
// 地图的中心地理坐标
var center = new qq.maps.LatLng(<?=$school_mst->longitude?$school_mst->longitude:39.914850?>,
<?=$school_mst->latitude?$school_mst->latitude:116.403765?>);
//定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
var map = new qq.maps.Map(
document.getElementById("container"),
{
center: center,
zoom: 13 // 地图的缩放级别。
}
);
//获取城市列表接口设置中心点
citylocation = new qq.maps.CityService({
complete : function(result){
map.setCenter(result.detail.latLng);
}
});
//调用searchLocalCity();方法 根据用户IP查询城市信息。
citylocation.searchLocalCity();
// 监听地图点击事件
qq.maps.event.addListener(map,'click',function(event) {
var position = new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng());
createMarker(position, map);
geocoder = new qq.maps.Geocoder({
complete : function(result){
map.setCenter(result.detail.location);
console.log(result);
$("#address").val(result.detail.address);
$("input[name='province']").val(result.detail.addressComponents.province);
$("input[name='city']").val(result.detail.addressComponents.city);
$("input[name='district']").val(result.detail.addressComponents.district);
$("input[name='street']").val(result.detail.addressComponents.streetNumber?result.detail.addressComponents.streetNumber:result.detail.addressComponents.street);
}
});
geocoder.getAddress(position);
$("input[name='longitude']").val(event.latLng.getLng());
$("input[name='latitude']").val(event.latLng.getLat());
});
}
//调用初始化函数地图
init();
var markersArray = [];
/*添加覆盖物*/
function createMarker(position, map) {
deleteOverlays();
var marker = new qq.maps.Marker({
position: position,
map: map
});
markersArray.push(marker);
}
/*删除覆盖物*/
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
/*添加比例尺控件 左下角*/
function scaleControl(map) {
var scaleControl = new qq.maps.ScaleControl({
align: qq.maps.ALIGN.BOTTOM_LEFT,
margin: qq.maps.Size(85, 15),
map: map
});
}
$('#image_file').change(function(){
var file = $('#image_file').get(0).files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
$('#imgshow').get(0).src = e.target.result;
}
})
}
</script>