Day2:leaflet簡介

15th鐵人賽

y97213h53

團隊NUTC imac

2024-09-10 14:21:46

150 瀏覽

分享至

leaflet簡介

什麼是leaflet

leaflet是一個開源的javascript函式庫，用於在網頁與手機上建立互動式的地圖、有許多好用的插件，官方文檔的教學文件也很齊全。

且leaflet支援許多塗層OpenStreetMap、Mapbox、Google Map

特色

1.輕量化:相較於其他的地圖函式庫(例如Google Maps API)，leaflet體積小，極度適合於網頁中
2.開源免費
3.擴展性高:有豐富的插件，功能豐富
4.相容性好:Leaflet 支援現代瀏覽器並且對於行動裝置也有很好的支援，適合製作響應式地圖應用。

安裝教學

如果是在純粹的html+css+js那就使用cdn引入

<!DOCTYPE html>
<html>
<head>
  <title>Leaflet 簡單地圖</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
</html>

cdn在官網的download可以看到