運用 JavaScript 創建互動式地圖應用程式的入門教學

在今日的全球化社會，地理資訊系統（GIS）和地圖應用程式越來越受到重視。無論是旅遊規劃、物流管理，還是地區分析，一個功能強大、用戶友善的地圖應用程式都是不可或缺的工具。本文將教你如何使用 JavaScript（JS）語言，簡單快速地建立一個基本但具互動性的地圖應用程式。

環境設定

首先，確保你的電腦上已經安裝了 Node.js 和 npm（Node Package Manager）。如果還沒有，請訪問 Node.js 官網 下載並安裝。

安裝完成後，打開終端機並輸入以下指令，確認安裝成功：

node -v
npm -v

Leaflet.js：一個簡單的選擇

Leaflet 是一個開源的 JavaScript 地圖庫，簡單易用且功能強大。首先，在你的專案資料夾中執行以下 npm 指令，安裝 Leaflet：

npm install leaflet

在 HTML 文件中，引入 Leaflet 的 CSS 和 JS 檔案：

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

創建你的第一個地圖

在 HTML 文件中，增加一個 div 元素來容納地圖：

<div id="myMap" style="height: 400px; width: 100%;"></div>

接著，在 JavaScript 文件（或 <script> 標籤中）使用以下程式碼來初始化地圖：

// 初始化地圖並設置經緯度和縮放級別
var myMap = L.map('myMap').setView([25.0343, 121.5641], 13);

// 加入地圖圖層
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(myMap);

加入互動元素：標記和彈出視窗

使用 Leaflet 的 marker 和 popup 功能，你可以很容易地增加互動元素。以下是一個簡單的範例：

// 添加標記
var marker = L.marker([25.0343, 121.5641]).addTo(myMap);

// 添加彈出視窗
marker.bindPopup("<b>歡迎來到台北！</b>").openPopup();

---

進階選項：Google Maps API

如果你需要更多自訂功能或商業用途，Google Maps API 是一個好選擇。首先，訪問 Google Cloud Platform 申請 API 金鑰。

在 HTML 中，引入 Google Maps JavaScript API：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

之後的操作與 Leaflet 類似，但需要用到 Google Maps 的語法。

---

結語

無論是使用 Leaflet 還是 Google Maps API，JavaScript 都提供了一個簡單但功能強大的方式來創建互動式地圖應用程式。透過本教學，希望你能開始你的地圖開發之旅。

如果你喜歡這篇文章，請分享並留言，我們會持續更新更多有用的教學資源。