Leaflet.js：修訂版本之間的差異

出自福留子孫
跳轉到： 導覽、 搜尋
 
（未顯示2位用戶所作出之20次版本）
第 1 行： 第 1 行：
 
[[分類:OpenStreetMap]]
 
[[分類:OpenStreetMap]]
 +
'''參考連結：'''
 +
#[https://dowyuu.github.io/program/2021/03/22/Leaflet-note/ Leaflet––輕量且易懂易用的互動地圖](值得整理)
 +
#[https://w3c.hexschool.com/openstreetmap/e8ac08ac OpenStreetMap & Leaflet 打造地圖視覺化](有範例程式與 API 大綱簡介)
 +
#[https://www.youtube.com/watch?v=pUizu62dlnY Leaflet + OpenStreetMap 兩小時應用開發教學影片]
 +
Leaflet 是一個開源的函式庫，能夠實現基本的地圖操作，建立圖層、標記、彈出窗口、縮放等操作。
  
−
===安裝 jupyter ===
+
通常以CDN(內容傳遞網路)引入建立地圖前需要的 CSS 和 JS 資料，如：
−
*打開終端機，安裝jupyter指令：'''!pip install folium'''。（MAC 使用者不用加「!」）
+
<pre><script src='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js'></script>
−
*打開終端機，安裝jupyter指令：'''!pip install notebook'''。（MAC 使用者不用加「!」）
+
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css'/></pre>
−
*打開終端機，執行jupyter指令：'''jupyter notebook'''，安裝完成 jupyter 將會開啟瀏覽器。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_初始介面.png' width='600px' />
+
  
−
===使用方式：===
+
'''用 L.map 初始化地圖設定：'''
−
*如何新增 python 檔案。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_新增py.png' width='600px' />
+
<pre>L.map(<String> id | <HTMLElement> el , options)</pre>
−
*程式碼編輯介面。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_程式碼編輯介面.png' width='600px' />
+
L.map 第1個參數能接收 ID 選取器或 DOM ， 第2個參數 options 用物件設定需要的屬性
  
−
===我的地圖===
+
'''用 L.tileLayer 建立圖磚：'''
−
*應用 Python 讀取 csv<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_顯示地標.png' width='600px' />
+
<pre>L.tilelayer(<String> urlTemplate, <TileLayer options> options?)</pre>
−
<pre>
+
−
import folium
+
−
import pandas as pd
+
  
−
# 讀取 CSV 檔案
+
<pre>L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
−
data = pd.read_csv("data.csv")
+
attribution: '&amp;copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors',
 +
}).addTo(map);</pre>
 +
#urlTemplate：圖資請求設定 https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
 +
#*{s}: 圖磚請求的 subDomain 預設為 a、b、c
 +
#*{z}: 地圖的 zoom 等級
 +
#*{x}: 圖磚的 x 座標
 +
#*{y}: 圖磚的 y 座標
 +
#attribution：圖資版權設定
 +
#設定圖資後使用 addTo() 送入 map 物件。
  
−
# 連接 map
+
在以下範例中， HTML 段落常用「反引號」包裹，裡面可以再包單引號或雙引號。在 javascript 中'''一組反引號「`」可以把多行的 HTML 包起來，並且使用${ } 輕易的插入變數：'''
−
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=14)
+
<pre>let price = 50;
 +
let name = '珍珠奶茶';
 +
str =`
 +
<ul class='menu'>
 +
<li>
 +
<h3>
 +
${name}
 +
</h3>
 +
<p>${price * 0.9}元</p>
 +
</li>
 +
</ul>
 +
`</pre>
  
−
# 增加 markers
+
示範程式一：一個地點
−
for i in range(0, len(data)):
+
<pre><!DOCTYPE html>
−
    folium.Marker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']], popup=data.iloc [i]['Name']).add_to (m)
+
<html>
−
 
+
<head>
−
# 展示在 map
+
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
−
m
+
<style>html,body {width:100%;height:100%;margin:0;padding:0;}</style>
−
</pre>
+
<!--可省略<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>-->
−
*如何變化標記：將標記改變成紅色圈。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_改變標記01.png' width='600px' />
+
<script src='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js'></script>
−
<pre>
+
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
−
import folium
+
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css'/>
−
import pandas as pd
+
<!--可省略<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no' />-->
−
 
+
<style>
−
# 讀取 CSV 檔案
+
/* 設定地圖區塊的 ID，用以與 JavaScript 互動 */
−
data = pd.read_csv("data.csv")
+
#map_8d7547be8d8cb9285c28ef544dc96b9c {
−
 
+
position:relative; /* 設定元素定位方式為相對定位 */
−
# 連接 map
+
width:100.0%;
−
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=15)
+
height:100.0%;
−
 
+
left:0.0%;
−
# 增加 markers
+
top:0.0%;
−
for i in range(0, len(data)):
+
}
−
   
+
/*  設定 Leaflet 地圖的字型大小為 1rem，即子元素的字體大小為根元素字體大小的一倍 */
−
    folium.CircleMarker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']],
+
.leaflet-container {font-size:1rem;}
−
    radius=5,
+
</style>
−
    color='red',
+
</head>
−
    fill=True,
+
<body>
−
    fi11_color='red',
+
<div class='folium-map' id='map_8d7547be8d8cb9285c28ef544dc96b9c'></div>
−
    popup=data.iloc [i]['Name']).add_to (m)
+
</body>
−
 
+
<script>
−
# 展示在 map
+
// 建立一個地圖物件，並設定初始的座標位置、縮放層級、底圖 CRS(座標參考系) 等屬性
−
m
+
var map_8d7547be8d8cb9285c28ef544dc96b9c = L.map(
−
</pre>
+
'map_8d7547be8d8cb9285c28ef544dc96b9c',
−
*如何變化標記：將標記改變成藍色圈且放大。<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_改變標記02.png' width='600px' />
+
{
−
<pre>
+
center:[25.01421121579881,121.46379173509496],
−
import folium
+
crs:L.CRS.EPSG3857,
−
import pandas as pd
+
zoom:15,
−
 
+
zoomControl:true,
−
# 讀取 CSV 檔案
+
preferCanvas:false
−
data = pd.read_csv("data.csv")
+
}
−
 
+
);
−
# 連接 map
+
// 建立一個地圖物件，並指定圖層資料源的URL、標記屬性等屬性，然後將圖層加入地圖
−
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=15)
+
var tile_layer_5bebbb5fece2d596fd71c941dbb4ad9d = L.tileLayer(
−
 
+
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
−
# 增加 markers
+
{
−
for i in range(0, len(data)):
+
attribution:
−
    folium.CircleMarker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']],
+
'Data by © <a target=\'_blank\' href=\'http://openstreetmap.org\'>OpenStreetMap</a>,under <a target=\'_blank\' href=\'http://www.openstreetmap.org/copyright\'>ODbL</a>.',
−
    radius=8,
+
detectRetina:false,
−
    color='blue',
+
maxNativeZoom:18,
−
    fill=True,
+
maxZoom:18,
−
    fi11_color='blue',
+
minZoom:0,
−
    popup=data.iloc [i]['Name']).add_to (m)
+
noWrap:false,
−
 
+
opacity:1,
−
# 展示在 map
+
subdomains:'abc',
−
m
+
tms:false
−
</pre>
+
}
−
*將程式轉換成網頁<br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_網頁儲存.png' width='600px' /><br/><br/><img src='http://jendo.org/~游士賢/使用說明/jupyter/jupyter_網頁.png' width='600px' />
+
).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
−
<pre>
+
// 建立一個圓形標記(代表板橋車站)，並設定該標記的座標位置、填充顏色、邊框顏色、邊框粗細等屬性，再將其加入地圖物件
−
import folium
+
var circle_marker_d7d6ba893e87bd16ad516ab23a265471 = L.circleMarker(
−
import pandas as pd
+
[25.01421121579881,121.46379173509496],
−
 
+
{
−
# 讀取 CSV 檔案
+
bubblingMouseEvents:true,
−
data = pd.read_csv("data.csv")
+
color:'blue',
−
 
+
dashArray:null,
−
# 連接 map
+
dashOffset:null,
−
m = folium. Map (location= [data ['Latitude'].mean(), data['Longitude'].mean ()], zoom_start=15)
+
fill:true,
−
 
+
fillColor:'blue',
−
# 增加 markers
+
fillOpacity:0.2,
−
for i in range(0, len(data)):
+
fillRule:'evenodd',
−
    folium.CircleMarker ([data.iloc [i]['Latitude'], data.iloc[i]['Longitude']],
+
lineCap:'round',
−
    radius=8,
+
lineJoin:'round',
−
    color='blue',
+
opacity:1.0,
−
    fill=True,
+
radius:8,
−
    fi11_color='blue',
+
stroke:true,
−
    popup=data.iloc [i]['Name']).add_to (m)
+
weight:3
−
 
+
}
−
# 展示在 map
+
).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
−
m
+
// 建立一個彈出視窗，並設定該彈出視窗的最大寬度
−
 
+
var popup_0c6f68e7affe1987d052919274941dcb = L.popup({maxWidth:'100%'});
−
# 將 map 轉換成 網頁
+
// 建立一個 HTML 元素，並將其設為彈出視窗的內容，再將該內容加入彈出視窗
−
m.save("index.html")
+
var html_5fa9a121de83f7c83e84d89cf3764f48 = $(
−
</pre>
+
`<div id='html_5fa9a121de83f7c83e84d89cf3764f48' style='width:100.0%; height:100.0%;'>板橋車站</div>`
 +
)[0];
 +
popup_0c6f68e7affe1987d052919274941dcb.setContent(
 +
html_5fa9a121de83f7c83e84d89cf3764f48
 +
);
 +
// 將圓形標記與彈出視窗做綁定，當使用者點擊圓形標記時，會彈出該彈出視窗
 +
circle_marker_d7d6ba893e87bd16ad516ab23a265471.bindPopup(
 +
popup_0c6f68e7affe1987d052919274941dcb
 +
);
 +
</script>
 +
</html></pre>
 +
示範程式二：兩個地點
 +
<pre><!DOCTYPE html>
 +
<html>
 +
<head>
 +
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
 +
<style>html,body {width:100%;height:100%;margin:0;padding:0;}</style>
 +
<!--可省略<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>-->
 +
<script src='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js'></script>
 +
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
 +
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css'/>
 +
<!--可省略<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no' />-->
 +
<style>
 +
/* 設定地圖區塊的 ID，用以與 JavaScript 互動 */
 +
#map_8d7547be8d8cb9285c28ef544dc96b9c {
 +
position:relative; /* 設定元素定位方式為相對定位 */
 +
width:100.0%;
 +
height:100.0%;
 +
left:0.0%;
 +
top:0.0%;
 +
}
 +
/*  設定 Leaflet 地圖的字型大小為 1rem，即子元素的字體大小為根元素字體大小的一倍 */
 +
.leaflet-container {font-size:1rem;}
 +
</style>
 +
</head>
 +
<body>
 +
<div class='folium-map' id='map_8d7547be8d8cb9285c28ef544dc96b9c'></div>
 +
</body>
 +
<script>
 +
// 建立一個地圖物件，並設定初始的座標位置、縮放層級、底圖 CRS(座標參考系) 等屬性
 +
var map_8d7547be8d8cb9285c28ef544dc96b9c = L.map(
 +
'map_8d7547be8d8cb9285c28ef544dc96b9c',
 +
{
 +
center:[25.00620324010834,121.468425037375],
 +
crs:L.CRS.EPSG3857,
 +
zoom:15,
 +
zoomControl:true,
 +
preferCanvas:false
 +
}
 +
);
 +
// 建立一個地圖物件，並指定圖層資料源的URL、標記屬性等屬性，然後將圖層加入地圖
 +
var tile_layer_5bebbb5fece2d596fd71c941dbb4ad9d = L.tileLayer(
 +
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 +
{
 +
attribution:'Data by &copy; <a target=\'_blank\' href=\'http://openstreetmap.org\'>OpenStreetMap</a>,under <a target=\'_blank\' href=\'http://www.openstreetmap.org/copyright\'>ODbL</a>.',
 +
detectRetina:false,
 +
maxNativeZoom:18,
 +
maxZoom:18,
 +
minZoom:0,
 +
noWrap:false,
 +
opacity:1,
 +
subdomains:'abc',
 +
tms:false
 +
}
 +
).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
 +
// 建立一個圓形標記(代表自強國中)，並設定該標記的座標位置、填充顏色、邊框顏色、邊框粗細等屬性，再將其加入地圖物件
 +
var circle_marker_030d721730ec5759fa41649b896ce3b8 = L.circleMarker(
 +
[24.99819526441787,121.47305833965504],
 +
{
 +
bubblingMouseEvents:true,
 +
color:'blue',
 +
dashArray:null,
 +
dashOffset:null,
 +
fill:true,
 +
fillColor:'blue',
 +
fillOpacity:0.2,
 +
fillRule:'evenodd',
 +
lineCap:'round',
 +
lineJoin:'round',
 +
opacity:1.0,
 +
radius:8,
 +
stroke:true,
 +
weight:3
 +
}
 +
).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
 +
// 建立一個彈出視窗，並設定該彈出視窗的最大寬度
 +
var popup_49dfa4e994f0cb57f246349da41c8934 = L.popup({maxWidth:'100%'});
 +
// 建立一個 HTML 元素，並將其設為彈出視窗的內容，再將該內容加入彈出視窗
 +
var html_62aef068de5d4abaf7111bbe18e748a1 = $(`<div id='html_62aef068de5d4abaf7111bbe18e748a1' style='width:100.0%; height:100.0%;'>自強國中</div>`)[0];
 +
popup_49dfa4e994f0cb57f246349da41c8934.setContent(html_62aef068de5d4abaf7111bbe18e748a1);
 +
circle_marker_030d721730ec5759fa41649b896ce3b8.bindPopup(popup_49dfa4e994f0cb57f246349da41c8934);
 +
// 建立一個圓形標記(代表板橋車站)，並設定該標記的座標位置、填充顏色、邊框顏色、邊框粗細等屬性，再將其加入地圖物件
 +
var circle_marker_d7d6ba893e87bd16ad516ab23a265471 = L.circleMarker(
 +
[25.01421121579881,121.46379173509496],
 +
{
 +
bubblingMouseEvents:true,
 +
color:'blue',
 +
dashArray:null,
 +
dashOffset:null,
 +
fill:true,
 +
fillColor:'blue',
 +
fillOpacity:0.2,
 +
fillRule:'evenodd',
 +
lineCap:'round',
 +
lineJoin:'round',
 +
opacity:1.0,
 +
radius:8,
 +
stroke:true,
 +
weight:3
 +
}
 +
).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
 +
var popup_0c6f68e7affe1987d052919274941dcb = L.popup({'maxWidth':'100%'});
 +
var html_5fa9a121de83f7c83e84d89cf3764f48 = $(`<div id='html_5fa9a121de83f7c83e84d89cf3764f48' style='width:100.0%; height:100.0%;'>板橋車站</div>`)[0];
 +
popup_0c6f68e7affe1987d052919274941dcb.setContent(html_5fa9a121de83f7c83e84d89cf3764f48);
 +
circle_marker_d7d6ba893e87bd16ad516ab23a265471.bindPopup(popup_0c6f68e7affe1987d052919274941dcb);
 +
</script>
 +
</html></pre>

2023年2月23日 (四) 09:19的最新修訂版本

參考連結：

  1. Leaflet––輕量且易懂易用的互動地圖(值得整理)
  2. OpenStreetMap & Leaflet 打造地圖視覺化(有範例程式與 API 大綱簡介)
  3. Leaflet + OpenStreetMap 兩小時應用開發教學影片

Leaflet 是一個開源的函式庫，能夠實現基本的地圖操作，建立圖層、標記、彈出窗口、縮放等操作。

通常以CDN(內容傳遞網路)引入建立地圖前需要的 CSS 和 JS 資料，如： 

<script src='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css'/>

用 L.map 初始化地圖設定： 

L.map(<String> id | <HTMLElement> el , options)

L.map 第1個參數能接收 ID 選取器或 DOM ， 第2個參數 options 用物件設定需要的屬性

用 L.tileLayer 建立圖磚： 

L.tilelayer(<String> urlTemplate, <TileLayer options> options?)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors',
}).addTo(map);
  1. urlTemplate：圖資請求設定 https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
    • {s}: 圖磚請求的 subDomain 預設為 a、b、c
    • {z}: 地圖的 zoom 等級
    • {x}: 圖磚的 x 座標
    • {y}: 圖磚的 y 座標
  2. attribution：圖資版權設定
  3. 設定圖資後使用 addTo() 送入 map 物件。

在以下範例中， HTML 段落常用「反引號」包裹，裡面可以再包單引號或雙引號。在 javascript 中一組反引號「`」可以把多行的 HTML 包起來，並且使用${ } 輕易的插入變數： 

let price = 50;
let name = '珍珠奶茶';
str =`
<ul class='menu'>
	<li>
		<h3>
			${name}
		</h3>
		<p>${price * 0.9}元</p>
	</li>
</ul>
`

示範程式一：一個地點 

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
	<style>html,body {width:100%;height:100%;margin:0;padding:0;}</style>
	<!--可省略<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>-->
	<script src='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js'></script>
	<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
	<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css'/>
	<!--可省略<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no' />-->
	<style>
		/* 設定地圖區塊的 ID，用以與 JavaScript 互動 */
		#map_8d7547be8d8cb9285c28ef544dc96b9c {
			position:relative; /* 設定元素定位方式為相對定位 */
			width:100.0%;
			height:100.0%;
			left:0.0%;
			top:0.0%;
		}
		/*  設定 Leaflet 地圖的字型大小為 1rem，即子元素的字體大小為根元素字體大小的一倍 */
		.leaflet-container {font-size:1rem;}
	</style>
</head>
<body>
	<div class='folium-map' id='map_8d7547be8d8cb9285c28ef544dc96b9c'></div>
</body>
<script>
	// 建立一個地圖物件，並設定初始的座標位置、縮放層級、底圖 CRS(座標參考系) 等屬性
	var map_8d7547be8d8cb9285c28ef544dc96b9c = L.map(
		'map_8d7547be8d8cb9285c28ef544dc96b9c',
		{
			center:[25.01421121579881,121.46379173509496],
			crs:L.CRS.EPSG3857,
			zoom:15,
			zoomControl:true,
			preferCanvas:false
		}
	);
	// 建立一個地圖物件，並指定圖層資料源的URL、標記屬性等屬性，然後將圖層加入地圖
	var tile_layer_5bebbb5fece2d596fd71c941dbb4ad9d = L.tileLayer(
		'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
		{
			attribution:
				'Data by © <a target=\'_blank\' href=\'http://openstreetmap.org\'>OpenStreetMap</a>,under <a target=\'_blank\' href=\'http://www.openstreetmap.org/copyright\'>ODbL</a>.',
			detectRetina:false,
			maxNativeZoom:18,
			maxZoom:18,
			minZoom:0,
			noWrap:false,
			opacity:1,
			subdomains:'abc',
			tms:false
		}
	).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
	// 建立一個圓形標記(代表板橋車站)，並設定該標記的座標位置、填充顏色、邊框顏色、邊框粗細等屬性，再將其加入地圖物件
	var circle_marker_d7d6ba893e87bd16ad516ab23a265471 = L.circleMarker(
		[25.01421121579881,121.46379173509496],
		{
			bubblingMouseEvents:true,
			color:'blue',
			dashArray:null,
			dashOffset:null,
			fill:true,
			fillColor:'blue',
			fillOpacity:0.2,
			fillRule:'evenodd',
			lineCap:'round',
			lineJoin:'round',
			opacity:1.0,
			radius:8,
			stroke:true,
			weight:3
		}
	).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
	// 建立一個彈出視窗，並設定該彈出視窗的最大寬度
	var popup_0c6f68e7affe1987d052919274941dcb = L.popup({maxWidth:'100%'});
	// 建立一個 HTML 元素，並將其設為彈出視窗的內容，再將該內容加入彈出視窗
	var html_5fa9a121de83f7c83e84d89cf3764f48 = $(
		`<div id='html_5fa9a121de83f7c83e84d89cf3764f48' style='width:100.0%; height:100.0%;'>板橋車站</div>`
	)[0];
	popup_0c6f68e7affe1987d052919274941dcb.setContent(
		html_5fa9a121de83f7c83e84d89cf3764f48
	);
	// 將圓形標記與彈出視窗做綁定，當使用者點擊圓形標記時，會彈出該彈出視窗
	circle_marker_d7d6ba893e87bd16ad516ab23a265471.bindPopup(
		popup_0c6f68e7affe1987d052919274941dcb
	);
</script>
</html>

示範程式二：兩個地點 

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
	<style>html,body {width:100%;height:100%;margin:0;padding:0;}</style>
	<!--可省略<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>-->
	<script src='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js'></script>
	<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
	<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css'/>
	<!--可省略<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no' />-->
	<style>
		/* 設定地圖區塊的 ID，用以與 JavaScript 互動 */
		#map_8d7547be8d8cb9285c28ef544dc96b9c {
			position:relative; /* 設定元素定位方式為相對定位 */
			width:100.0%;
			height:100.0%;
			left:0.0%;
			top:0.0%;
		}
		/*  設定 Leaflet 地圖的字型大小為 1rem，即子元素的字體大小為根元素字體大小的一倍 */
		.leaflet-container {font-size:1rem;}
	</style>
</head>
<body>
	<div class='folium-map' id='map_8d7547be8d8cb9285c28ef544dc96b9c'></div>
</body>
<script>
	// 建立一個地圖物件，並設定初始的座標位置、縮放層級、底圖 CRS(座標參考系) 等屬性
	var map_8d7547be8d8cb9285c28ef544dc96b9c = L.map(
		'map_8d7547be8d8cb9285c28ef544dc96b9c',
		{
			center:[25.00620324010834,121.468425037375],
			crs:L.CRS.EPSG3857,
			zoom:15,
			zoomControl:true,
			preferCanvas:false
		}
	);
	// 建立一個地圖物件，並指定圖層資料源的URL、標記屬性等屬性，然後將圖層加入地圖
	var tile_layer_5bebbb5fece2d596fd71c941dbb4ad9d = L.tileLayer(
		'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
		{
			attribution:'Data by © <a target=\'_blank\' href=\'http://openstreetmap.org\'>OpenStreetMap</a>,under <a target=\'_blank\' href=\'http://www.openstreetmap.org/copyright\'>ODbL</a>.',
			detectRetina:false,
			maxNativeZoom:18,
			maxZoom:18,
			minZoom:0,
			noWrap:false,
			opacity:1,
			subdomains:'abc',
			tms:false
		}
	).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
	// 建立一個圓形標記(代表自強國中)，並設定該標記的座標位置、填充顏色、邊框顏色、邊框粗細等屬性，再將其加入地圖物件
	var circle_marker_030d721730ec5759fa41649b896ce3b8 = L.circleMarker(
		[24.99819526441787,121.47305833965504],
		{
			bubblingMouseEvents:true,
			color:'blue',
			dashArray:null,
			dashOffset:null,
			fill:true,
			fillColor:'blue',
			fillOpacity:0.2,
			fillRule:'evenodd',
			lineCap:'round',
			lineJoin:'round',
			opacity:1.0,
			radius:8,
			stroke:true,
			weight:3
		}
	).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
	// 建立一個彈出視窗，並設定該彈出視窗的最大寬度
	var popup_49dfa4e994f0cb57f246349da41c8934 = L.popup({maxWidth:'100%'});
	// 建立一個 HTML 元素，並將其設為彈出視窗的內容，再將該內容加入彈出視窗
	var html_62aef068de5d4abaf7111bbe18e748a1 = $(`<div id='html_62aef068de5d4abaf7111bbe18e748a1' style='width:100.0%; height:100.0%;'>自強國中</div>`)[0];
	popup_49dfa4e994f0cb57f246349da41c8934.setContent(html_62aef068de5d4abaf7111bbe18e748a1);
	circle_marker_030d721730ec5759fa41649b896ce3b8.bindPopup(popup_49dfa4e994f0cb57f246349da41c8934);
	// 建立一個圓形標記(代表板橋車站)，並設定該標記的座標位置、填充顏色、邊框顏色、邊框粗細等屬性，再將其加入地圖物件
	var circle_marker_d7d6ba893e87bd16ad516ab23a265471 = L.circleMarker(
		[25.01421121579881,121.46379173509496],
		{
			bubblingMouseEvents:true,
			color:'blue',
			dashArray:null,
			dashOffset:null,
			fill:true,
			fillColor:'blue',
			fillOpacity:0.2,
			fillRule:'evenodd',
			lineCap:'round',
			lineJoin:'round',
			opacity:1.0,
			radius:8,
			stroke:true,
			weight:3
		}
	).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
	var popup_0c6f68e7affe1987d052919274941dcb = L.popup({'maxWidth':'100%'});
	var html_5fa9a121de83f7c83e84d89cf3764f48 = $(`<div id='html_5fa9a121de83f7c83e84d89cf3764f48' style='width:100.0%; height:100.0%;'>板橋車站</div>`)[0];
	popup_0c6f68e7affe1987d052919274941dcb.setContent(html_5fa9a121de83f7c83e84d89cf3764f48);
	circle_marker_d7d6ba893e87bd16ad516ab23a265471.bindPopup(popup_0c6f68e7affe1987d052919274941dcb);
</script>
</html>
取自「http://well-being-ng.net/wellBeingNg/index.php?title=Leaflet.js&oldid=13162」