之前已經講過根據點繪製路線，以及不包括路線的縮放，故不多講這些。

1 首先是畫路線，這個不再說了

2 使用Button進行縮放

由於放大，縮小一樣，所以只講縮小

因為之前繪製了路線，在進行縮放時，需要清除路線，重新繪製

         function Small() {
          var width1 = $("#ImgMap").width() / 1.2;
        var height1 = $("#ImgMap").height() / 1.2;
          $("img").attr("width", width1);
         $("img").attr("height", height1);
          var lstMapPoint = $(".MapPoint");
          var i = 1;
          var x1, y1, x2, y2;
         CleanLine(width1, height1);
         for (i = 0; i < lstMapPoint.length; i++) {
             x1 = $($(".MapPoint").eq(i)).css("left");
             y1 = $($(".MapPoint").eq(i)).css("top");
               $(".MapPoint").eq(i).css("left", parseInt(x1) / 1.2);
             $(".MapPoint").eq(i).css("top", parseInt(y1) / 1.2);
          }
         alert(2);
           LoadLine();//上一篇已經講過繪製路線，這裡不再貼出來程式碼了
       }

        //清除路線
        function CleanLine(width, height) {
            var canvas = $("#myCanvas");
            canvas.attr("width", width);
            canvas.attr("height", height);
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, width, height);//主要是這一句
        }
 

2 使用滾輪進行縮放

由於事先方式和第一篇是完全一樣的，所以不講了

3使用下拉框

（1）定義下拉框

    <div class="Toolbar_SearchBox" style="width:250px;margin-right:450px">
        <div class="input-group">
            <span class="input-group-addon">比例</span>
            <select class="form-control " id="Part" name="Part" onchange="Change()">
                <option id="select" selected="selected" value=""></option>
                <option value="1">20%</option>
                <option value="2">50%</option>
                <option value="3">70%</option>
                <option value="4">100%</option>
                <option value="5">150%</option>
                <option value="6">200%</option>
                <option value="7">300%</option>
                <option value="8">400%</option>
            </select>
        </div>
    </div>
 

（2）縮放

//通過下拉選單調整圖片大小
        var y = false;
        var width = 0;
        var height = 0;//必須賦值
        var StatusChange = 1;
        var Status = 0;
        var newv = 1;
        function Change() {
            var v = $("#Part option:selected").text();
            Status = newv;
            newv = v.replace(/%/, "");//當前比例
            newv = newv / 100;
            //alert(Status);
            StatusChange = newv / Status;//當前與上一次的比值
            if (y == false) {
                width = $("#ImgMap").width();
                height = $("#ImgMap").height();
                y = true;
            }
            var lstMapPoint = $(".MapPoint");
            width1 = width * newv;
            height1 = height * newv;
            CleanLine(width1, height1);
            $("img").attr("width", width1);
            $("img").attr("height", height1);
            var i;
            var x1, x2, y1, y2;
            for (i = 0; i < lstMapPoint.length; i++) {
                x1 = lstMapPoint.eq(i).css("left");
                y1 = lstMapPoint.eq(i).css("top");
               lstMapPoint.eq(i).css("left", ((parseInt(x1) + 20) * StatusChange - 20) + "px");
                lstMapPoint.eq(i).css("top", ((parseInt(y1) + 20) * StatusChange - 20) + "px");
            }
           LoadLine();
        }