1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>百度地图轨迹运动</title>
6 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YOUR KEY"></script>
7 <style type="text/css">
8 #allmap {
9 width: auto;
10 height: 600px;
11 border: 1px solid gray;
12 }
13
14 #user1 {
15 top: 80px;
16 }
17
18 #user2 {
19 top: 200px;
20 }
21
22 .user-list {
23 right: 25px;
24 position: fixed;
25 border: 1px solid #c0c0c0;
26 width: 180px;
27 height: 110px;
28 background: #fff;
29 border-radius: 10px;
30 filter: alpha(Opacity=80);
31 -moz-opacity: 0.8;
32 opacity: 0.8;
33 }
34
35 .user-list ul {
36 list-style-type: none;
37 padding-left: 10px;
38 }
39
40 .user-list ul li {
41 padding-bottom: 10px;
42 }
43 </style>
44 </head>
45 <body>
46 经度:<input id="lng" type="text" placeholder="输入地图经度">
47 纬度:<input id="lat" type="text" placeholder="输入地图纬度" required="">
48 <button id="addPoint" onclick="run();">添加轨迹</button><br /><br />
49 <div id="allmap"></div>
50 <div id="user1" class="user-list">
51 <ul>
52 <li>姓名:张三</li>
53 <li>职务:3</li>
54 <li>电话:13552307638</li>
55 </ul>
56 </div>
57 <div id="user2" class="user-list">
58 <ul>
59 <li>姓名:李四</li>
60 <li>职务:3</li>
61 <li>电话:13552307638</li>
62 </ul>
63 </div>
64 <script type="text/javascript">
65 //百度地图API
66 var map = new BMap.Map("allmap");
67 map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
68 map.enableScrollWheelZoom(true); //启动滚轮放大缩小
69 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
70 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
71 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
72
73 var poinArr = new Array();
74
75 poinArr[poinArr.length] = new BMap.Point(106.521436, 29.532288); //起点默认为重庆
76
77 //起点-重庆 106.521436, 29.532288 添加到文本框的几点坐标点(测试),注意坐标点需要有规律些喔!
78 //终点-西安 108.983569, 34.285675
79 //终点-北京 116.404449, 39.920423
80 //终点-沈阳 123.432790, 41.808644
81 window.run = function () {
82 var log = document.getElementById("lng").value; //地图经度
83 var lat = document.getElementById("lat").value; //地图纬度
84
85 //根据用户添加的点动态添加地图轨迹
86 poinArr[poinArr.length] = new BMap.Point(log, lat);
87 map.clearOverlays(); //清除地图上所有的覆盖物
88 var driving = new BMap.DrivingRoute(map); //创建驾车实例
89
90 if (poinArr.length > 1) {
91 for (var i = 1; i < poinArr.length; i++) {
92 driving.search(poinArr[i - 1], poinArr[i]);
93 }
94 }
95 driving.setSearchCompleteCallback(function () {
96 var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例,获得一系列点的数组
97 var polyline = new BMap.Polyline(pts);
98 map.addOverlay(polyline);
99 var m1 = new BMap.Marker(poinArr[0]);
100 map.addOverlay(m1); //红标记
101 lab1 = new BMap.Label("起点", { position: poinArr[0] });
102 map.addOverlay(lab1); //标记起点
103 for (var i = 1; i < poinArr.length; i++) {
104 var m = new BMap.Marker(poinArr[i]);
105 map.addOverlay(m);
106 lab = new BMap.Label("终点", { position: poinArr[i] });
107 map.addOverlay(lab);
108 }
109 setTimeout(function () {
110 map.setViewport(poinArr); //调整到最佳视野
111 }, 1000);
112 });
113 }
114 </script>
115 </body>
116 </html>