qq.maps.Polyline 类

继承自MVCObject类

折线覆盖物。

构造函数

构造函数
Polyline(options:PolylineOptions)

方法

方法 返回值 说明
getBounds() LatLngBounds 返回折线的地理区域范围。
getMap() Map 获取折线所在的map对象
getPath() MVCArray.<LatLng> 获取折线的经纬度坐标数组。
getStrokeColor() Color 获取折线的颜色。
getStrokeWeight() Number 获取折线的宽度。
getStrokeLinecap() String 获取折线末端线帽的样式。
getVisible() Boolean 获取折线的可见性。
getZIndex() Number 获取折线的zIndex值。
setMap(map:Map) none 设置折线所在的map对象
setPath(path:Array.<LatLng> | MVCArray.<LatLng>) none 设置折线的路径。
setStrokeColor(color:Color) none 设置折线的颜色（包括透明度）。
setStrokeWeight(width:Number) none 设置折线的宽度。
setStrokeLinecap(linecap:String) none 设置折线末端线帽的样式，圆形为round（默认），方形为square，平直为butt。
setVisible(visible:Boolean) none 设置折线的可见性。
setZIndex(zIndex:Number) none 设置折线的zIndex。
setOptions(options:PolylineOptions) none

事件

事件名 参数 说明
map_changed none 当此折线所在地图更改时会触发此事件。
visible_changed none 当此折线所可见性更改时会触发此事件。
zindex_changed none 当此折线zIndex更改时会触发此事件。
click event:MouseEvent 点击此折线后会触发此事件。
dblclick event:MouseEvent 双击折线后会触发此事件。
rightclick event:MouseEvent 右键点击折线后会触发此事件。
mousedown event:MouseEvent 鼠标在折线上按下触发此事件。
mouseup event:MouseEvent 鼠标在折线上抬起时触发此事件。
mouseover event:MouseEvent 当鼠标进入折线区域时会触发此事件。
mouseout event:MouseEvent 鼠标离开折线时触发此事件。
mousemove event:MouseEvent 鼠标在折线上移动时触发此事件。
insertNode event:MouseEvent 添加折线节点时触发此事件。
removeNode event:MouseEvent 删除折线节点时触发此事件。
adjustNode event:MouseEvent 移动折线节点时触发此事件。

实例

例子 1：

本示例中，介绍如何设置线条颜色及透明度

JavaScript
  1. var map = new qq.maps.Map(document.getElementById("container"), {
  2.     // 地图的中心地理坐标。
  3.     center: new qq.maps.LatLng(39.916527, 116.397128),
  4.     zoom: 14
  5. });
  6. var path = [
  7.     new qq.maps.LatLng(39.910, 116.399),
  8.     new qq.maps.LatLng(39.920, 116.405),
  9.     new qq.maps.LatLng(39.930, 116.420)
  10. ];
  11. var polyline = new qq.maps.Polyline({
  12.     map: map,
  13.     path: path,
  14.     strokeColor: new qq.maps.Color(0, 0, 0, 0.5)
  15. });
JavaScript+HTML
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.     <title>腾讯地图-简单地图示例</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  8.     <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
  9.     <style type="text/css">
  10.         html,
  11.         body {
  12.             height: 100%;
  13.             margin: 0px;
  14.             padding: 0px
  15.         }
  16.         #container {
  17.             width: 100%;
  18.             height: 100%
  19.         }
  20.     </style>
  21. </head>
  22.  
  23. <body>
  24.     <div id="container"></div>
  25.     <script type="text/javascript">
  26.         var map = new qq.maps.Map(document.getElementById("container"), {
  27.             // 地图的中心地理坐标。
  28.             center: new qq.maps.LatLng(39.916527, 116.397128),
  29.             zoom: 14
  30.         });
  31.         var path = [
  32.             new qq.maps.LatLng(39.910, 116.399),
  33.             new qq.maps.LatLng(39.920, 116.405),
  34.             new qq.maps.LatLng(39.930, 116.420)
  35.         ];
  36.         var polyline = new qq.maps.Polyline({
  37.             map: map,
  38.             path: path,
  39.             strokeColor: new qq.maps.Color(0, 0, 0, 0.5)
  40.         });
  41.     </script>
  42. </body>
  43.  
  44. </html>
新窗口打开 在线试一试

例子 2：

本示例中，介绍如何开启编辑功能

JavaScript
  1. var map = new qq.maps.Map(document.getElementById("container"), {
  2.     // 地图的中心地理坐标。
  3.     center: new qq.maps.LatLng(39.916527, 116.397128),
  4.     zoom: 14
  5. });
  6. var path = [
  7.     new qq.maps.LatLng(39.910, 116.399),
  8.     new qq.maps.LatLng(39.920, 116.405),
  9.     new qq.maps.LatLng(39.930, 116.420)
  10. ];
  11. var polyline = new qq.maps.Polyline({
  12.     map: map,
  13.     path: path,
  14.     editable: true
  15. });
JavaScript+HTML
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.     <title>腾讯地图-简单地图示例</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  8.     <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
  9.     <style type="text/css">
  10.         html,
  11.         body {
  12.             height: 100%;
  13.             margin: 0px;
  14.             padding: 0px
  15.         }
  16.         #container {
  17.             width: 100%;
  18.             height: 100%
  19.         }
  20.     </style>
  21. </head>
  22.  
  23. <body>
  24.     <div id="container"></div>
  25.     <script type="text/javascript">
  26.         var map = new qq.maps.Map(document.getElementById("container"), {
  27.             // 地图的中心地理坐标。
  28.             center: new qq.maps.LatLng(39.916527, 116.397128),
  29.             zoom: 14
  30.         });
  31.         var path = [
  32.             new qq.maps.LatLng(39.910, 116.399),
  33.             new qq.maps.LatLng(39.920, 116.405),
  34.             new qq.maps.LatLng(39.930, 116.420)
  35.         ];
  36.         var polyline = new qq.maps.Polyline({
  37.             map: map,
  38.             path: path,
  39.             editable: true
  40.         });
  41.     </script>
  42. </body>
  43.  
  44. </html>
新窗口打开 在线试一试

例子 3：

本示例中,介绍如何使用折线覆盖物的方法

JavaScript
  1. var init = function() {
  2.     var center = new qq.maps.LatLng(39.916527, 116.397128);
  3.     var map = new qq.maps.Map(document.getElementById('container'), {
  4.         center: center,
  5.         zoom: 13
  6.     });
  7.     var path1 = [
  8.         new qq.maps.LatLng(39.910, 116.399),
  9.         new qq.maps.LatLng(39.920, 116.405),
  10.         new qq.maps.LatLng(39.930, 116.420)
  11.     ];
  12.     var path2 = [
  13.         new qq.maps.LatLng(39.930456, 116.387554),
  14.         new qq.maps.LatLng(39.929008, 116.414162),
  15.         new qq.maps.LatLng(39.909786, 116.379314),
  16.         new qq.maps.LatLng(39.908206, 116.416908)
  17.     ];
  18.     var polyline = new qq.maps.Polyline({
  19.         path: path1,
  20.         strokeColor: '#000000',
  21.         strokeWeight: 5,
  22.         editable: false,
  23.         map: map
  24.     });
  25.  
  26.     //setMap()设置折线覆盖物所在地图
  27.     var mapM = document.getElementById("mapM");
  28.     qq.maps.event.addDomListener(mapM, "click", function() {
  29.         polyline.setVisible(true);
  30.         if (polyline.getMap()) {
  31.             polyline.setMap(null);
  32.         } else {
  33.             polyline.setMap(map);
  34.         }
  35.     });
  36.  
  37.     //setCursor()设置鼠标经过折线时的样式
  38.     var curF = true;
  39.     var cursor = document.getElementById("cursor");
  40.     qq.maps.event.addDomListener(cursor, "click", function() {
  41.         polyline.setMap(map);
  42.         polyline.setVisible(true);
  43.         if (curF) {
  44.             curF = false;
  45.             polyline.setCursor("default");
  46.         } else {
  47.             curF = true;
  48.             polyline.setCursor("pointer");
  49.         }
  50.     });
  51.  
  52.     //setPath()设置折线路径
  53.     var pathF = true;
  54.     var path = document.getElementById("path");
  55.     qq.maps.event.addDomListener(path, "click", function() {
  56.         polyline.setMap(map);
  57.         polyline.setVisible(true);
  58.         if (pathF) {
  59.             pathF = false;
  60.             polyline.setPath(path2);
  61.         } else {
  62.             pathF = true;
  63.             polyline.setPath(path1);
  64.         }
  65.     });
  66.  
  67.     //setStrokeColor()设置折线的颜色
  68.     var strokeF = true;
  69.     var strokeC = document.getElementById("strokeC");
  70.     qq.maps.event.addDomListener(strokeC, "click", function() {
  71.         polyline.setMap(map);
  72.         polyline.setVisible(true);
  73.         if (strokeF) {
  74.             strokeF = false;
  75.             //设置折线的颜色和透明度
  76.             polyline.setStrokeColor(new qq.maps.Color(0, 0, 0, 0.5));
  77.         } else {
  78.             strokeF = true;
  79.             polyline.setStrokeColor("#1c29d8");
  80.         }
  81.     });
  82.  
  83.     //setStrokeDashStyle()设置折线的样式
  84.     var dashF = true;
  85.     var dash = document.getElementById("dash");
  86.     qq.maps.event.addDomListener(dash, "click", function() {
  87.         polyline.setMap(map);
  88.         polyline.setVisible(true);
  89.         if (dashF) {
  90.             dashF = false;
  91.             polyline.setStrokeDashStyle("dash");
  92.         } else {
  93.             dashF = true;
  94.             polyline.setStrokeDashStyle("solid");
  95.         }
  96.     });
  97.  
  98.     //setStrokeWeight()设置折线的宽度
  99.     var strokeWeightF = true;
  100.     var strokeWeight = document.getElementById("strokeWeight");
  101.     qq.maps.event.addDomListener(strokeWeight, "click", function() {
  102.         polyline.setMap(map);
  103.         polyline.setVisible(true);
  104.         if (strokeWeightF) {
  105.             strokeWeightF = false;
  106.             polyline.setStrokeWeight(10);
  107.         } else {
  108.             strokeWeightF = true;
  109.             polyline.setStrokeWeight(5);
  110.         }
  111.     });
  112.  
  113.     //setVisible()设置折线的可见性
  114.     var visibleF = true;
  115.     var visibleT = document.getElementById("visibleT");
  116.     qq.maps.event.addDomListener(visibleT, "click", function() {
  117.         polyline.setMap(map);
  118.         if (visibleF) {
  119.             visibleF = false;
  120.             polyline.setVisible(false);
  121.         } else {
  122.             visibleF = true;
  123.             polyline.setVisible(true);
  124.         }
  125.     });
  126. };
JavaScript+HTML
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  7.     <title>添加折线覆盖物</title>
  8.     <style type="text/css">
  9.         * {
  10.             margin: 0px;
  11.             padding: 0px;
  12.         }
  13.         body,
  14.         button,
  15.         input,
  16.         select,
  17.         textarea {
  18.             font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
  19.         }
  20.         #info {
  21.             width: 603px;
  22.             padding-top: 3px;
  23.             overflow: hidden;
  24.         }
  25.         .btn {
  26.             width: 142px;
  27.         }
  28.     </style>
  29.     <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
  30.     <script>
  31.         var init = function() {
  32.             var center = new qq.maps.LatLng(39.916527, 116.397128);
  33.             var map = new qq.maps.Map(document.getElementById('container'), {
  34.                 center: center,
  35.                 zoom: 13
  36.             });
  37.             var path1 = [
  38.                 new qq.maps.LatLng(39.910, 116.399),
  39.                 new qq.maps.LatLng(39.920, 116.405),
  40.                 new qq.maps.LatLng(39.930, 116.420)
  41.             ];
  42.             var path2 = [
  43.                 new qq.maps.LatLng(39.930456, 116.387554),
  44.                 new qq.maps.LatLng(39.929008, 116.414162),
  45.                 new qq.maps.LatLng(39.909786, 116.379314),
  46.                 new qq.maps.LatLng(39.908206, 116.416908)
  47.             ];
  48.             var polyline = new qq.maps.Polyline({
  49.                 path: path1,
  50.                 strokeColor: '#000000',
  51.                 strokeWeight: 5,
  52.                 editable: false,
  53.                 map: map
  54.             });
  55.  
  56.             //setMap()设置折线覆盖物所在地图
  57.             var mapM = document.getElementById("mapM");
  58.             qq.maps.event.addDomListener(mapM, "click", function() {
  59.                 polyline.setVisible(true);
  60.                 if (polyline.getMap()) {
  61.                     polyline.setMap(null);
  62.                 } else {
  63.                     polyline.setMap(map);
  64.                 }
  65.             });
  66.  
  67.             //setCursor()设置鼠标经过折线时的样式
  68.             var curF = true;
  69.             var cursor = document.getElementById("cursor");
  70.             qq.maps.event.addDomListener(cursor, "click", function() {
  71.                 polyline.setMap(map);
  72.                 polyline.setVisible(true);
  73.                 if (curF) {
  74.                     curF = false;
  75.                     polyline.setCursor("default");
  76.                 } else {
  77.                     curF = true;
  78.                     polyline.setCursor("pointer");
  79.                 }
  80.             });
  81.  
  82.             //setPath()设置折线路径
  83.             var pathF = true;
  84.             var path = document.getElementById("path");
  85.             qq.maps.event.addDomListener(path, "click", function() {
  86.                 polyline.setMap(map);
  87.                 polyline.setVisible(true);
  88.                 if (pathF) {
  89.                     pathF = false;
  90.                     polyline.setPath(path2);
  91.                 } else {
  92.                     pathF = true;
  93.                     polyline.setPath(path1);
  94.                 }
  95.             });
  96.  
  97.             //setStrokeColor()设置折线的颜色
  98.             var strokeF = true;
  99.             var strokeC = document.getElementById("strokeC");
  100.             qq.maps.event.addDomListener(strokeC, "click", function() {
  101.                 polyline.setMap(map);
  102.                 polyline.setVisible(true);
  103.                 if (strokeF) {
  104.                     strokeF = false;
  105.                     //设置折线的颜色和透明度
  106.                     polyline.setStrokeColor(new qq.maps.Color(0, 0, 0, 0.5));
  107.                 } else {
  108.                     strokeF = true;
  109.                     polyline.setStrokeColor("#1c29d8");
  110.                 }
  111.             });
  112.  
  113.             //setStrokeDashStyle()设置折线的样式
  114.             var dashF = true;
  115.             var dash = document.getElementById("dash");
  116.             qq.maps.event.addDomListener(dash, "click", function() {
  117.                 polyline.setMap(map);
  118.                 polyline.setVisible(true);
  119.                 if (dashF) {
  120.                     dashF = false;
  121.                     polyline.setStrokeDashStyle("dash");
  122.                 } else {
  123.                     dashF = true;
  124.                     polyline.setStrokeDashStyle("solid");
  125.                 }
  126.             });
  127.  
  128.             //setStrokeWeight()设置折线的宽度
  129.             var strokeWeightF = true;
  130.             var strokeWeight = document.getElementById("strokeWeight");
  131.             qq.maps.event.addDomListener(strokeWeight, "click", function() {
  132.                 polyline.setMap(map);
  133.                 polyline.setVisible(true);
  134.                 if (strokeWeightF) {
  135.                     strokeWeightF = false;
  136.                     polyline.setStrokeWeight(10);
  137.                 } else {
  138.                     strokeWeightF = true;
  139.                     polyline.setStrokeWeight(5);
  140.                 }
  141.             });
  142.  
  143.             //setVisible()设置折线的可见性
  144.             var visibleF = true;
  145.             var visibleT = document.getElementById("visibleT");
  146.             qq.maps.event.addDomListener(visibleT, "click", function() {
  147.                 polyline.setMap(map);
  148.                 if (visibleF) {
  149.                     visibleF = false;
  150.                     polyline.setVisible(false);
  151.                 } else {
  152.                     visibleF = true;
  153.                     polyline.setVisible(true);
  154.                 }
  155.             });
  156.         };
  157.     </script>
  158. </head>
  159.  
  160. <body onload="init()">
  161.     <div style="width:603px;height:300px" id="container"></div>
  162.     <div id="info">
  163.         <button id="mapM" class="btn">setMap</button>
  164.         <button id="cursor" class="btn">setCursor</button>
  165.         <button id="path" class="btn">setPath</button>
  166.         <button id="strokeC" class="btn">setStrokeColor</button>
  167.         <button id="dash" class="btn">setStrokeDashStyle</button>
  168.         <button id="strokeWeight" class="btn">setStrokeWeight</button>
  169.         <button id="visibleT" class="btn">setVisible</button>
  170.     </div>
  171. </body>
  172.  
  173. </html>
新窗口打开 在线试一试