範例:繪製路徑&控制路徑

mcmap.route.html

<div id="map_canvas_route"></div>
<button class="route" data-key="路徑1"> 路徑1</button>
<button class="route_marker" data-key="路徑1">路徑1:標記</button>
<script>
var MapContainerRoute = $('#map_canvas_route').mcMap({
  center: {               // 中心點位置
    x: '25.040893', 
    y: '121.515827'
  },
  // 路徑群組
  route:
  [
    {
      key:'路徑1',
      polyline : [
        {
          coords: [
            [24.993993,121.505013],
            [25.045948,121.476688],
            [25.091351,121.463985]
          ],
          key:'路徑1',
          color: '#0088FF',
          width: 5,
          opacity:1
        }
      ],
      marker:               // 標記
      [
        {
          position:{          //標記位置
            x:'24.993993', 
            y:'121.505013'
          },
          key:'路徑1-標記1',
          title:'路徑1-標記1',      // alt文字
          icon:markerImg, // 標記圖片
          infoWindow : {      // 訊息視窗
            text:'路徑1-標記1',     // 訊息文字
            evt:'click'       // 訊息觸發事件
          }
        },
        {
          position:{          //標記位置
            x:'25.091351', 
            y:'121.463985'
          },
          key:'路徑1-標記2',
          title:'路徑1-標記2',      // alt文字
          icon:markerImg, // 標記圖片
          infoWindow : {      // 訊息視窗
            text:'路徑1-標記2',     // 訊息文字
            evt:'click'       // 訊息觸發事件
          }
        }
      ]
    },
    {
      key:'路徑2',
      polyline : [
        {
          coords: [
            [25.021062,121.527758],
            [24.992904,121.540976],
            [24.998194,121.580029]
          ],
          key:'路徑2',
          color: '#749631',
          width: 5,
          opacity:1
        }
      ],
      marker:               // 標記
      [
        {
          position:{          //標記位置
            x:'25.021062', 
            y:'121.527758'
          },
          key:'路徑2-標記1',
          title:'路徑2-標記1',      // alt文字
          icon:markerImg, // 標記圖片
          infoWindow : {      // 訊息視窗
            text:'路徑2-標記1',     // 訊息文字
            evt:'click'       // 訊息觸發事件
          }
        },
        {
          position:{          //標記位置
            x:'24.998194', 
            y:'121.580029'
          },
          key:'路徑2-標記2',
          title:'路徑2-標記2',      // alt文字
          icon:markerImg, // 標記圖片
          infoWindow : {      // 訊息視窗
            text:'路徑2-標記2',     // 訊息文字
            evt:'click'       // 訊息觸發事件
          }
        }
      ]
    }
  ]
});
// 路徑顯示控制
$('.route').click(function(){
  var $this = $(this),
      route_key = $this.data('key');
  MapContainerRoute.ToggleRoute(route_key);
});
// 路徑標記顯示控制
$('.route_marker').click(function(){
  var $this = $(this),
      route_key = $this.data('key');
  MapContainerRoute.ToggleRouteMarker(route_key);
});
</script>