zoukankan      html  css  js  c++  java
  • 地图的折线: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>  
  • 相关阅读:
    echarts如何设置背景图的颜色
    小程序获取的用户头像怎么做成圆形
    小程序源码丢失了怎么在微信平台反编译找回
    微信小程序弹框提示绑定手环实例
    微信小程序仿微信运动步数排行-交互
    微信小程序简单常见首页demo
    微信小程序实现tab页面切换功能
    微信小程序实现一个简单的表格
    2018年各大互联网前端面试题三(阿里)
    java和c/c++
  • 原文地址:https://www.cnblogs.com/swfzzz/p/8424547.html
Copyright © 2011-2022 走看看