1 线：
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
7 <style type="text/css">
8 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
9 </style>
10 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cxxxx59xxxxAyigxxxx"></script>
11 <title>连线</title>
12 </head>
13 <body>
14 <div id="allmap"></div>
15 </body>
16 </html>
17 <script type="text/javascript">
18 // 百度地图API功能
19 var map = new BMap.Map("allmap");
20 map.centerAndZoom("郑州",5); //初始化地图,设置城市和地图级别。
21 map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
22 map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
23 map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
24 map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
25 //map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角，打开
26
27 var lineList = [
28 { title: "1", pointA: "116.364531,40.057003",pointB: "118.79687,32.06025"},
29 { title: "2",pointA: "91.14085,29.64555",pointB: "102.71,25.0458"},
30 { title: "3", pointA: "120.58531,31.29888",pointB: "126.53496,45.80377"},
31 { title: "4", pointA: "101.77822,36.61714",pointB: "118.08942,24.47983"}
32 ];
33
34 if(lineList.length == 0){
35 var pointA = new BMap.Point('','');
36 var pointB = new BMap.Point('','');
37 var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); //定义折线
38 map.addOverlay(polyline); //添加折线到地图上
39 }else{
40 for (var i = 0; i < lineList.length; i++) {
41 if(isNaN(lineList[i].pointA) && isNaN(lineList[i].pointB) && lineList[i].pointA.indexOf(',') > -1 && lineList[i].pointB.indexOf(',') > -1 ){
42 var pAJ = lineList[i].pointA.split(",")[0];
43 var pAW = lineList[i].pointA.split(",")[1];
44 var pBJ = lineList[i].pointB.split(",")[0];
45 var pBW = lineList[i].pointB.split(",")[1];
46 var pointA = new BMap.Point(pAJ,pAW);
47 var pointB = new BMap.Point(pBJ,pBW);
48 var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});
49 map.addOverlay(polyline);
50 }
51 }
52 }
53 </script>
54
55
56 点：
57 <html>
58 <head>
59 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
60 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
61 <style type="text/css">
62 body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
63 #allmap{height:500px;width:100%;}
64 #r-result{width:100%; font-size:14px;}
65 </style>
66 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=csnx5xxxawttrxxxxx"></script>
67 <title>标注</title>
68 </head>
69 <body>
70 <div id="allmap" ></div>
71 </body>
72 </html>
73 <script type="text/javascript">
74 // 百度地图API功能
75 var map = new BMap.Map("allmap");
76 map.centerAndZoom("郑州",5); //初始化地图,设置城市和地图级别。
77 map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
78 map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
79 map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
80 map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
81 //var points = [];
82 //points.push(new BMap.Point(116.331398, 39.897445));
83 //points.push(new BMap.Point(108.312241, 22.787823));
84 //points.push(new BMap.Point(110.312241, 22.787823));
85 var points = [
86 { title: "1", pointA: "116.364531,40.057003"},
87 { title: "2",pointA: "91.14085,29.64555"},
88 { title: "3", pointA: "120.58531,31.29888"},
89 { title: "4", pointA: "101.77822,36.61714"}
90 ];
91 //用经纬度设置地图中心点
92 map.clearOverlays();
93
94 for (i = 0; i < points.length; i++) {
95 //var point = points[i];
96 var pAJ = points[i].pointA.split(",")[0];
97 var pAW = points[i].pointA.split(",")[1];
98 var point = new BMap.Point(pAJ,pAW);
99
100 var marker = new BMap.Marker(point); // 创建标注
101 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
102 map.addOverlay(marker); // 将标注添加到地图中
103 var opts = {
104 width : 200, // 信息窗口宽度
105 height : 100, // 信息窗口高度
106 title : "车辆信息", // 信息窗口标题
107 enableMessage : true, //设置允许信息窗发送短息
108 message : "车辆在途跟踪！"
109 }
110 var infoWindow = new BMap.InfoWindow("车牌号： <br>" + "<a href='#'>查看调度</a>", opts); // 创建信息窗口对象
111 marker.addEventListener("mouseover", (function (info, po) {
112 return function(){
113 map.openInfoWindow(info, po); //开启信息窗口
114 }
115 })(infoWindow, point));
116 }
117 </script>
118
119
120 箭头：
121 <html>
122 <head>
123 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
124 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
125 <style type="text/css">
126 body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
127 #allmap{height:500px;width:100%;}
128 #r-result{width:100%; font-size:14px;}
129 </style>
130 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=csxxx9GxxxxxVZ0xx"></script>
131 <title>城市名定位</title>
132 </head>
133 <body>
134 <div id="allmap" ></div>
135 <div id="r-result">
136 经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
137 纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />
138 <input type="button" value="查询" onclick="theLocation()" />
139 </div>
140 </body>
141 </html>
142 <script type="text/javascript">
143 // 百度地图API功能
144 var map = new BMap.Map("allmap");
145 map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 11);
146 map.addControl(new BMap.NavigationControl());
147 map.enableScrollWheelZoom(true);
148 var points = [];
149 points.push(new BMap.Point(116.331398, 39.897445));
150 points.push(new BMap.Point(108.312241, 22.787823));
151 points.push(new BMap.Point(110.312241, 22.787823));
152
153 var polyline = new BMap.Polyline(points, {
154 strokeColor : "red", //设置颜色
155 strokeWeight : 3, //宽度
156 strokeOpacity : 0.5
157 }); //透明度
158
159
160 // 用经纬度设置地图中心点
161 function theLocation() {
162 map.clearOverlays();
163
164 for (i = 0; i < points.length; i++) {
165 //var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
166 var point = points[i];
167
168 var marker = new BMap.Marker(point); // 创建标注
169 map.addOverlay(marker); // 将标注添加到地图中
170 var opts = {
171 width : 200, // 信息窗口宽度
172 height : 100, // 信息窗口高度
173 title : "车辆信息", // 信息窗口标题
174 enableMessage : true, //设置允许信息窗发送短息
175 message : "车辆在途跟踪！"
176 }
177 var infoWindow = new BMap.InfoWindow("车牌号： <br>" + "<a href='#'>查看调度</a>", opts); // 创建信息窗口对象
178 marker.addEventListener("click", (function (info, po) {
179 return function(){
180 map.openInfoWindow(info, po); //开启信息窗口
181 }
182 })(infoWindow, point));
183 }
184 //alert(map.getDistance(new BMap.Point(108.312241,22.787823),new BMap.Point(116.323308,24.811744)));
185 if (document.getElementById("longitude").value != "" && document.getElementById("latitude").value != "") {
186 var new_point = new BMap.Point(document.getElementById("longitude").value, document.getElementById("latitude").value);
187 var marker = new BMap.Marker(new_point); // 创建标注
188 map.addOverlay(marker); // 将标注添加到地图中
189 map.panTo(new_point);
190 var opts = {
191 width : 200, // 信息窗口宽度
192 height : 100, // 信息窗口高度
193 title : "车辆信息", // 信息窗口标题
194 enableMessage : true, //设置允许信息窗发送短息
195 message : "车辆在途跟踪！"
196 }
197 var infoWindow = new BMap.InfoWindow("车牌号： <br>" + "<a href='#'>查看调度</a>", opts); // 创建信息窗口对象
198 marker.addEventListener("click", function () {
199 map.openInfoWindow(infoWindow, new_point); //开启信息窗口
200 });
201 }
202 map.addOverlay(polyline);
203 addArrow(polyline, 50, Math.PI / 7);
204 }
205
206 function addArrow(polyline, length, angleValue) { //绘制箭头的函数
207 var linePoint = polyline.getPath(); //线的坐标串
208 var arrowCount = linePoint.length;
209 for (var i = 1; i < arrowCount; i++) { //在拐点处绘制箭头
210 var pixelStart = map.pointToPixel(linePoint[i - 1]);
211 var pixelEnd = map.pointToPixel(linePoint[i]);
212 var angle = angleValue; //箭头和主线的夹角
213 var r = length; // r/Math.sin(angle)代表箭头长度
214 var delta = 0; //主线斜率，垂直时无斜率
215 var param = 0; //代码简洁考虑
216 var pixelTemX,
217 pixelTemY; //临时点坐标
218 var pixelX,
219 pixelY,
220 pixelX1,
221 pixelY1; //箭头两个点
222 if (pixelEnd.x - pixelStart.x == 0) { //斜率不存在是时
223 pixelTemX = pixelEnd.x;
224 if (pixelEnd.y > pixelStart.y) {
225 pixelTemY = pixelEnd.y - r;
226 } else {
227 pixelTemY = pixelEnd.y + r;
228 }
229 //已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
230 pixelX = pixelTemX - r * Math.tan(angle);
231 pixelX1 = pixelTemX + r * Math.tan(angle);
232 pixelY = pixelY1 = pixelTemY;
233 } else { //斜率存在时
234 delta = (pixelEnd.y - pixelStart.y) / (pixelEnd.x - pixelStart.x);
235 param = Math.sqrt(delta * delta + 1);
236
237 if ((pixelEnd.x - pixelStart.x) < 0) { //第二、三象限
238 pixelTemX = pixelEnd.x + r / param;
239 pixelTemY = pixelEnd.y + delta * r / param;
240 } else { //第一、四象限
241 pixelTemX = pixelEnd.x - r / param;
242 pixelTemY = pixelEnd.y - delta * r / param;
243 }
244 //已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
245 pixelX = pixelTemX + Math.tan(angle) * r * delta / param;
246 pixelY = pixelTemY - Math.tan(angle) * r / param;
247
248 pixelX1 = pixelTemX - Math.tan(angle) * r * delta / param;
249 pixelY1 = pixelTemY + Math.tan(angle) * r / param;
250 }
251
252 var pointArrow = map.pixelToPoint(new BMap.Pixel(pixelX, pixelY));
253 var pointArrow1 = map.pixelToPoint(new BMap.Pixel(pixelX1, pixelY1));
254 var Arrow = new BMap.Polyline([
255 pointArrow,
256 linePoint[i],
257 pointArrow1
258 ], {
259 strokeColor : "blue",
260 strokeWeight : 3,
261 strokeOpacity : 0.5
262 });
263 map.addOverlay(Arrow);
264 }
265 }
266 </script>
