-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
314 lines (285 loc) · 11.7 KB
/
index.html
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BAIDU</title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=kFxygnwq99AWyTwS2uisUS2ebTwveZoM" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
html{height:2000px}
body{height:100%;margin:0;padding:0;}
#container{position: relative;width: 100%;}
#control{width: 200px;
height: 150px;
display: none;
position: absolute;
left: 2px;
top: 500px;
text-align: center;
padding: 20px 10px;
background: #E6E6E6;
box-shadow:8px 8px 8px #252525;
-webkit-box-shadow:8px 8px 8px #252525;
border-radius: 10px}
.search-close{
position: absolute;
right: 6px;
top: 6px;
}
.modal-body{
text-align: center;
}
.busline-result{
width: 80%;
text-align: left;
margin-top: 10px;
cursor: pointer;
}
ol{list-style-type:none;counter-reset:sectioncounter;}
ol li{display:block;width:100%;text-align: left;margin-top: 10px}
ol li:before {
content:counter(sectioncounter) "、";
counter-increment:sectioncounter;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="control">
<button type="button" class="close" ><span class="search-close" aria-hidden="true" onclick="hideSearch()" >×</span><span class="sr-only">Close</span></button>
<p>在这里输入公交线路：</p>
<input class="form-control" type="text">
<button class="btn btn-success" id="search" data-toggle="modal" data-target="#myModal" style="margin-top: 15px">搜索</button>
<button class="btn btn-warning" id="clear" style="margin-top: 15px" onclick=map.clearOverlays()>清除路线</button>
</div>
<div id="result"></div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">搜索结果</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(112.974079,28.239595); // 创建点坐标
map.centerAndZoom(point, 14); // 初始化地图，设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); //添加控件导航条
map.addControl(new BMap.ScaleControl()); //比例尺控件
map.addControl(new BMap.OverviewMapControl()); //缩略图控件
map.addControl(new BMap.MapTypeControl()); //地图类型控件
//map.enableScrollWheelZoom(); // 开启滑轮支持
map.setCurrentCity("长沙");
// 仅当设置城市信息时，MapTypeControl的切换功能才能可用
// 以上是设定地图的基础界面
//
//1、物件类
//
// function addMarker(point, index){ // 创建图标对象
//
// var marker = new BMap.Marker(point); //创建标注
// marker.addEventListener("click", function(e){
// var opts = {
// width : 250, // 信息窗口宽度
// height: 100, // 信息窗口高度
// title : "Hello" // 信息窗口标题
// }
// var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
// map.openInfoWindow(infoWindow,new BMap.Point(e.point.lng,e.point.lat)); // 打开信息窗口
// });
// marker.enableDragging();//拖拽功能
// marker.addEventListener("dragend", function(e){
// alert("当前位置：" + e.point.lng + ", " + e.point.lat);
// })
// map.addOverlay(marker); //将标注添加到地图中
// }
// // 随机向地图添加10个标注
// var bounds = map.getBounds();
// bounds.maxX = bounds.Ee;
// bounds.minX = bounds.Je;
// bounds.maxY = bounds.De;
// bounds.minY = bounds.Ie;
// var lngSpan = bounds.maxX - bounds.minX;
// var latSpan = bounds.maxY - bounds.minY;
// console.log(bounds);
// console.log(lngSpan);
// console.log(latSpan);
// for (var i = 0; i < 10; i ++) {
// var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),
// bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));
// console.log(point);
// addMarker(point, i);
// }
//以上是添加标注点的部分
//
////折线
// var polyline = new BMap.Polyline([
// new BMap.Point(112.974079,28.199595),
// new BMap.Point(112.954079,28.199595)
// ],
// {strokeColor:"blue", strokeWeight:1, strokeOpacity:1}
// );
// map.addOverlay(polyline);
//
////自定义覆盖物
// // 定义自定义覆盖物的构造函数
// function SquareOverlay(center, length, color){
// this._center = center;
// this._length = length;
// this._color = color;
// }
// // 继承API的BMap.Overlay
// SquareOverlay.prototype = new BMap.Overlay();
//
// // 实现初始化方法
// SquareOverlay.prototype.initialize = function(map){
//// 保存map对象实例
// this._map = map;
// // 创建div元素，作为自定义覆盖物的容器
// var div = document.createElement("div");
// div.style.position = "absolute";
// // 可以根据参数设置元素外观
// div.style.width = this._length + "px";
// div.style.height = this._length + "px";
// div.style.background = this._color;
//// 将div添加到覆盖物容器中
// map.getPanes().markerPane.appendChild(div);
//// 保存div实例
// this._div = div;
//// 需要将div元素作为方法的返回值，当调用该覆盖物的show、
//// hide方法，或者对覆盖物进行移除时，API都将操作此元素。
// return div;
// }
// // 实现绘制方法
// SquareOverlay.prototype.draw = function(){
//// 根据地理坐标转换为像素坐标，并设置给容器
// var position = this._map.pointToOverlayPixel(this._center);
// this._div.style.left = position.x - this._length / 2 + "px";
// this._div.style.top = position.y - this._length / 2 + "px";
// }
// // 实现显示方法
// SquareOverlay.prototype.show = function(){
// if (this._div){
// this._div.style.display = "";
// }
// }
//
// var mySquare = new SquareOverlay(map.getCenter(), 100, "red");//创建自定义对象
// map.addOverlay(mySquare);//将自定义覆盖物添加到地图
// 2、图层
// var traffic = new BMap.TrafficLayer(); // 创建交通流量图层实例
// map.addTileLayer(traffic); // 将图层添加到地图上
//
// setTimeout(function () {
// map.removeTileLayer(traffic) //移除交通层
// },3000)
//本地搜索
// var local = new BMap.LocalSearch(map, {
// renderOptions: {map: map,autoViewport: true,panel: "results"},pageCapacity: 100
// });
// local.search("905路");
//！！！公共交通部分 (此部分出错了)
// var transit = new BMap.TransitRoute("长沙市");
// transit.setSearchCompleteCallback(function(results){
// console.log(results);
// if (transit.getStatus() == BMAP_STATUS_SUCCESS){
// var firstPlan = results.getPlan(0);
// // 绘制步行线路
// for (var i = 0; i < firstPlan.getNumRoutes(); i ++){
// var walk = firstPlan.getRoute(i);
// if (walk.getDistance(false) > 0){
// // 步行线路有可能为0
// map.addOverlay(new BMap.Polyline(walk.getPoints(), {lineColor: "green"}));
// }
// }
// // 绘制公交线路
// for (i = 0; i < firstPlan.getNumLines(); i ++){
// var line = firstPlan.getLine(i);
// map.addOverlay(new BMap.Polyline(line.getPoints()));
// }
// // 输出方案信息
// var s = [];
// for (i = 0; i < results.getNumPlans(); i ++){
// s.push((i + 1) + ". " + results.getPlan(i).getDescription());
// }
// document.getElementById("log").innerHTML = s.join("<br>");
// }
// })
// transit.search("科教新村", "五一广场");
var buslineSearch = new BMap.BusLineSearch("长沙市",{
onGetBusListComplete : function (rs) { //rs:BusListResult
busListResult = rs;
var modal_html ="<ol>";
for(var i=0;i<rs.getNumBusList();i++){
console.log(rs.getBusListItem(i).name);
modal_html += "<li><a class='busline-result' onclick=getBuslineDetail("+i+")>"+rs.getBusListItem(i).name+"</a></li>"
}
modal_html += "</ol>";
$(".modal-body").html(modal_html);
},
onPolylinesSet: function () {
alert("done")
},
onGetBusLineComplete:function (rs) {
console.log(rs.getPolyline());
console.log("BusStationNumber: "+rs.getNumBusStations());
var busStations = [];
for(var i=0;i<rs.getNumBusStations();i++){
console.log(rs.getBusStation(i).name);
busStations.push(rs.getBusStation(i).position);
var circle = new BMap.Circle(rs.getBusStation(i).position,10,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆
map.addOverlay(circle); //增加圆
}
// var busStationsPly = new BMap.Polyline(busStations);
// busStationsPly.setStrokeColor("green");
// map.addOverlay(busStationsPly); 折线测试
console.log(busStations);
var ply = rs.getPolyline();
ply.setStrokeWeight(2);
ply.setStrokeColor("red");
map.addOverlay(rs.getPolyline());
}
});
var busListResult;
//var result = buslineSearch.getBusList("立珊专线"); //搜索，指向onGetBusListComplete
</script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
//获取公交路线详细信息并在地图中显示
function getBuslineDetail(i) {
console.log(i);
var temp = buslineSearch.getBusLine(busListResult.getBusListItem(i)); //获取线路信息，指向onGetBusLineComplete
}
$(function () {
//设定地图高度
var height = $(window).height().toString();
$("#container").css('height',height);
//左下搜索栏延时显示
setTimeout(function () {
$("#control").slideDown();
},3000);
//隐藏搜索栏
function hideSearch() {
$("#control").slideUp();
}
//搜索线路，获取搜索结果并在模态框中展示
$("#search").click(function () {
var keyword = $("#control input").val();
var result = buslineSearch.getBusList(keyword); //搜索，指向onGetBusListComplete
});
})
</script>
</body>
</html>