百度地图点、线、箭头

  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>
posted @ 2018-09-16 23:08 面向bug编程阅读(2408) 评论(0) 收藏举报
刷新页面返回顶部
面向bug编程

百度地图点、线、箭头

公告
