使用 leaflet.js 來製作互動地圖

以往我們認識的地圖類型的網站大家應該想到的都是 google map,但由於 google map api 不斷漲價的緣故,所以最近也不少人開始去使用其他免費的開源的程式,像這個 leaflet.js 就是幫我們快速建立地圖互動功能的工具。

要使用的話就先照官方文件將 css 與 js 讀入

https://unpkg.com/[email protected]/dist/leaflet.css
https://unpkg.com/[email protected]/dist/leaflet.js

接下來建立一個地圖,可以設定 id="map",並替他設定樣式(主要是高度不然會看不到)。

接下來像這樣建立地圖就好了:

 // 建立 Leaflet 地圖
  var map = L.map('map');

  // 設定經緯度座標
  map.setView(new L.LatLng(25.040199, 121.511901), 12);
  
  // 設定圖資來源
  var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 16});
  map.addLayer(osm);

 

圖資可以自己選擇,如果不想用上述的 openstreetmap 的圖資,也可以使用 mapbox 的服務。

只要註冊 mapbox 的帳號後,可以透過以下方式建立 mapbox 樣式的地圖:

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

 

結果如下:

 

在地圖上建立 marker:

var marker = L.marker([25.040199, 121.511901]).addTo(map);
marker.bindPopup("總統府").openPopup();

結果:

 

使用迴圈可以跑出複數的點:

for( $i=0; $i<schools.length; $i++){
        L.marker([schools[$i]["lat"], schools[$i]["lng"]]).addTo(map)
            .bindPopup(schools[$i]["name"])
            .openPopup();
}