前言

完成了起手式之後，還有很多功能可以使用，接下來將先從map class開始介紹，希望能把我所了解的東西一起整理之後，寫成文章分享，同時也能藉機修正我的一些錯誤的觀念，希望大家能夠給我一些指教。

在map這個class下有很多options(這是從官網上直接拿過來用的，姑且就跟著叫他option吧)
像是在上一篇01. Leaflet起手式 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天用到的：

var myMap = L.map('mapid', {
    center: [22.73444963475145, 120.28458595275877],
    zoom: 14
});

上面寫的是建立地圖的方法，建立時需設定center及zoom這兩個參數，讓地圖能夠找到位置顯示。
center中輸入的參數是座標，在官網中是以<latlng>表示，是用[]將座標以陣列方式包起來，格式是[y, x]，預設座標系統以WGS84為主；zoom則是數字<number>，這邊代表輸入的zoom等級。
而map中有一個option可以將上面的程式碼更簡化一些。

setView簡介

map中有一個option叫setView，屬於修改map狀態的method，在官方文件有提到setView的說明：

Sets the view of the map (geographical center and zoom) with the given animation options.

意思就是設定地圖圖面的範圍，setView中的參數有座標跟zoom等級，座標指的是範圍的中心點，zoom等級就是縮放遠近，利用這兩個參數去設定圖面的範圍，這兩個參數剛好對應到上面的程式碼，setView所需要的參數都有了！所以來改寫一下：

var myMap = L.map('mapid').setView([22.73444963475145, 120.28458595275877], 14);

兩個方式呈現的地圖都長一樣，但不同的是，setView可以設定不一樣的座標跟zoom，將地圖畫面縮放移動到不同的範圍，而上一篇的程式碼是在宣告map時一同設定好參數，不同的地方在於1步與2步的差別：

修改map狀態的option (Modifying map state)

與setView同樣屬於Modifying map的類型還有許多，這邊只提幾個看起來比較常用的：

為了讓邦友們能夠更了解以下options的效果，並且跟著動手試試看，現在請照上一篇起手式的步驟建立基本地圖的html檔，然後拿掉jquery的保護，讓chrome的console可以直接存取資料並操作地圖，順便體驗一下失去保護的網頁會有怎樣的下場（？）。為了避免變數名稱衝突，我這邊統一把map都改成myMap了，如果有邦友在起手式有跟著做的話，請記得調整，以免後面操作時搞混。去掉保護的程式碼如下所示：

// (function($){
// $(document).ready(function(){
$('#mapid').height(window.innerHeight);

var myMap = L.map('mapid').setView([22.73444963475145, 120.28458595275877], 14);

L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
    maxZoom: 14,
    attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
}).addTo(myMap);
// });
// })($)

設定好後將html開啟，同時開啟開發者工具，如下所示

完成配置後，我們就來一一測試一下囉！

• setZoom(zoom等級<number>)
  修改zoom等級，只要輸入的數字在此地圖的可設定的zoom等級，就可以直接跳到指定的zoom等級中。由於一開始設定的zoom等級為14，下面將設定為13。在console中輸入以下指令，來看看有什麼變化：

  myMap.setZoom(13)
  

  
  地圖縮放了！！！讓我們再來看看下一個

• zoomOut(縮小級數<number>)
  依輸入級數縮小，等於目標的zoom等級是目前的zoom等級再減去輸入的數字。在剛剛setZoom(13)之後，目前的zoom等級就是13，所以現在來試試看zoomOut(7)會如何：

  myMap.zoomOut(7)
  

  
  你會看到地圖縮到可以看見整個台灣的範圍了，縮小了想要拉回去怎麼辦呢？試試zoomIn()吧！

• zoomIn(放大級數<number>)
  依輸入級數放大。等於目標的zoom等級是目前的zoom等級再加上輸入的數字。剛剛從13 zoomOut 7，所以現在的zoom等級應該是6。如果要回到一開始的14，需要zoomIn的等級為$14-6=8$。所以來試試看zoomIn(8)！

  myMap.zoomIn(8)
  

  
  由於這個地圖有設定maxZoom為14，所以zoom等級到了14之後就無法再zoomIn，因此現在可以看到左上角的+已經無法按了。

• fitBounds(邊界範圍<bounds>)
  縮放到指定邊界範圍，可以是範圍對角座標的Array，或是範圍對角點的LatLngBounds()，以及圖層的getBounds()回傳的邊界範圍。

  • [[40.712, -74.227], [40.774, -74.125]]
  • LatLngBounds(p1, p2)，p1、p2都是<latlng>
  • anyLayers.getBounds()

• panTo(座標<latlng>)
  移動到指定中心點，不會動到zoom

• flyTo(座標<latlng>, zoom等級<number>)
  以動畫方式移動縮放到指定的新範圍，用座標及zoom等級去設定

除了Modifying map state，map還有以下方法可使用：

• Getting map state
• Layers and controls
• Conversion methods
• Other methods

由於篇幅關係，以上幾項將會在下一篇繼續介紹。