範例:繪製折線&控制折線

mcmap.polyline.html

<div id="map_canvas_polyline"></div>
<button class="polyline" data-key="折線2">折線2</button>

<script>
var MapContainerPolyline = $('#map_canvas_polyline').mcMap({
  center: {               // 中心點位置
    x: '25.040893', 
    y: '121.515827'
  },
  polyline : 
  [
    {
      coords: [         // 折線點
        [25.05176, 121.54683],
        [25.05876, 121.55301],
        [25.05673, 121.56005]
      ],
      key:'折線1',      // 折線Key
      color: '#EA4F54', // 線顏色
      width: 5,         // 線寬
      opacity:1         // 透明度
    },
    {
      coords: [         // 折線點
        [25.02394, 121.552734],
        [25.041088, 121.576381]
      ],
      key:'折線2',      // 折線Key
      color: '#924CE8', // 線顏色
      width: 5,         // 線寬
      opacity:0.8       // 透明度
    }
  ]
});

// 折線顯示控制
$('.polyline').click(function(){
  var $this = $(this)
      polyline_key = $this.data('key');
  MapContainerPolyline.TogglePolyline(polyline_key);
});
</script>