[ 網頁應用 ] Leaflet - 應用篇

開始Leaflet囉

方法和 jQuery 一樣。

就像 Google Map 一樣，在載入地圖之前，我們需要先在網頁上給這個地圖規劃出顯示的範圍，而這個範圍必須是區塊元素。Leaflet 是以 map 這個 id 名稱辨識出這個網頁是哪一個地方要放地圖的。

    <div id="map"></div>

JS:

var map = L.map('map',{
    center: []//經緯度
    zoom: 16 //數值越大，顯示的範圍越精細，eg 3 顯示世界地圖
})

跟 JS 說我要建立一個變數，這個變數是透過 Leaflet(L)使用它提供的 map() 這個方法，建立起來的地圖。

這時候地圖的骨架就建立好了。可是，當你檢視網頁時，你會發現z頁上一片空白。這是因為 Leaflet 只建立了方法，它已經幫你幫經緯度畫好了(可是我們看不到)，也透過這個經緯度的系統把標記點
標上了，但地圖本身還沒有載入。

所以，我們還要透過以下的程式碼，告訴 Leaflet 我們要用哪個圖資（圖床）：

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'...'}).addTo(map)

上述地圖的 z, x, y 是什麼呢？那就是圖資提供我們的每個地圖圖磚的數值。雖然這串程式碼看似只有一張圖片，但是實際上卻是一連串的地圖圖磚，待輸出到網頁時組裝起來。

L.marker([/* 經緯度 */]).addTo(map)
    .bindPopup('<h1>高雄軟體園區</h1>') //標記上增加文字
    .openPopup(); //marker