範例:產生地圖後加入折線、標記、路徑

mcmap.Add.html

<div id="map_canvas_add"></div>
<button class="add_polyline" data-key="加入的折線">加入折線</button>
<button class="add_polyline_display" data-key="加入的折線">控制加入折線</button>
<button class="add_marker" data-key="加入的標記">加入標記</button>
<button class="add_marker_display" data-key="加入的標記">控制加入標記</button>
<button class="add_route" data-key="加入的路徑">加入路徑</button>
<button class="add_route_display" data-key="加入的路徑">控制加入路徑</button>
<button class="add_route_marker_display" data-key="加入的路徑">控制加入路徑標記</button>

<script>
var MapContainerAdd = $('#map_canvas_add').mcMap();
// 加入折線
$('.add_polyline').click(function(){
  MapContainerAdd.AddPolyline({
    polyline : 
    [
      {
        coords: [         // 折線點
          [25.035294,121.499691],
          [25.063054,121.518831],
          [25.021062,121.527929]
        ],
        key:'加入的折線',   // 折線Key
        color: '#EA4F54', // 線顏色
        width: 5,         // 線寬
        opacity:1         // 透明度
      }
    ]
  });
  $(this).attr("disabled",true);
});
// 折線顯示控制
$('.add_polyline_display').click(function(){
  var $this = $(this),
      polyline_key = $this.data('key');
  MapContainerAdd.TogglePolyline(polyline_key);
});
// 加入標記
$('.add_marker').click(function(){
  MapContainerAdd.AddMarker({
    marker:               // 標記
    [
      {
        position:{          //標記位置
          x:'25.041515', 
          y:'121.543293'
        },
        key:'加入的標記',
        title:'加入的標記',      // alt文字
        icon:markerImg, // 標記圖片
        infoWindow : {      // 訊息視窗
          text:'加入的標記',     // 訊息文字
          evt:'click'       // 訊息觸發事件
        }
      }
    ]
  });
  $(this).attr("disabled",true);
});

// 標記顯示控制
$('.add_marker_display').click(function(){
  var $this = $(this),
      marker_key = $this.data('key');
  MapContainerAdd.ToggleMarker(marker_key);
});

// 加入折線
$('.add_route').click(function(){
  MapContainerAdd.AddRoute({
    route:
    [
      {
        key:'加入的路徑',
        polyline : [
          {
            coords: [
              [25.063209,121.551275],
              [25.084044,121.594362],
              [25.055512,121.617365]
            ],
            key:'折線',
            color: '#0088FF',
            width: 5,
            opacity:1
          }
        ],
        marker:               // 標記
        [
          {
            position:{          //標記位置
              x:'25.084044', 
              y:'121.594362'
            },
            key:'加入的路徑-標記1',
            title:'加入的路徑-標記1',      // alt文字
            icon:markerImg, // 標記圖片
            infoWindow : {      // 訊息視窗
              text:'加入的路徑-標記1',     // 訊息文字
              evt:'click'       // 訊息觸發事件
            }
          }
        ]
      }
    ]
  });
  $(this).attr("disabled",true);
});
// 路徑顯示控制
$('.add_route_display').click(function(){
  var $this = $(this),
      route_key = $this.data('key');
  MapContainerAdd.ToggleRoute(route_key);
});
// 路徑標記顯示控制
$('.add_route_marker_display').click(function(){
  var $this = $(this),
      route_key = $this.data('key');
  MapContainerAdd.ToggleRouteMarker(route_key);
});
</script>