地图的折线:Polyline

Posted 风中之烛_清

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了地图的折线:Polyline相关的知识,希望对你有一定的参考价值。

(1)var polyline = new BMap.Polyline([new BMap.Point(X1,Y1),new BMap.Point(X2,Y2),new BMap.Point(X3,Y3)],{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});

(2)map.addOverlay(polyline);

 1 <html>  
 2     <head>  
 3         <!--引用百度地图-->  
 4         <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">  
 5         </script>  
 6         <title>  
 7            地图折线
 8         </title>  
 9                 <!--  
10         设计样式   
11             container容器:占50%大小  
12         -->  
13         <style type="text/css">  
14         #container{  
15             width:50%;  
16             height:50%;   
17         }  
18         </style>  
19     </head>  
20     <body>  
21         <div id="container"></div>  
22         <script type="text/javascript">  
23             var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性;  
24             var point = new BMap.Point(116.404, 39.915);//定位  
25             map.centerAndZoom(point,15);                //将point移到浏览器中心,并且地图大小调整为15;  
26               
27             //标注  
28             var marker = new BMap.Marker(point);  
29             map.addOverlay(marker);  
30             marker.addEventListener("click",function(){ //点击标注时出发事件  
31                 alert("您点击了标注");  
32             });  
33             marker.enableDragging();    //标注可拖拽  
34               
35             //创建信息窗口  
36             var opts = {    
37                 width : 250,     // 信息窗口宽度    
38                 height: 100,     // 信息窗口高度    
39                 title : "Hello"  // 信息窗口标题    
40             }    
41             var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
42             map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口   
43               
44             //折线  
45             var polyline = new BMap.Polyline([    
46                     new BMap.Point(116.399, 39.910),    
47                     new BMap.Point(116.405, 39.920),  
48                     new BMap.Point(117.321,40.321)    
49                         ],    
50                         {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}  //蓝色、宽度为6  
51             );    
52             map.addOverlay(polyline);    
53               
54         </script>  
55     </body>  
56 </html>  

 

以上是关于地图的折线:Polyline的主要内容,如果未能解决你的问题,请参考以下文章

谷歌地图 Android API v2 - 折线上的信息窗口?

无法删除谷歌地图片段中的折线

百度地图添加覆盖物,画折线,用定时器不断的画,两点一条线,不一会就非常卡顿了.我想模仿轨迹

如何在谷歌地图 ios sdk 中显示多条折线

Google 地图 API 中的颜色变化折线属性

Android Google Maps:使用折线在多边形中切孔