繁體中文

AngularJS 教學

AngularJS 應用

AngularJS - Leaflet 應用程序：初學者指南

你好，未來的編程超新星！今天，我們將踏上一段令人興奮的旅程，探索 AngularJS 和 Leaflet 的世界。別擔心這些術語現在聽起來像是外語——到了這個教學結束時，你將能夠迅速流利地說出 "網頁地圖"！

AngularJS - Leaflet Application

AngularJS 和 Leaflet 是什麼？

在我們深入代碼之前，讓我們先來了解一下這些技術是什麼：

AngularJS

AngularJS 是一個強大的 JavaScript 框架，幫助我們建立動態網頁應用程序。把它想像成一位超級聰明的助手，組織你的代碼並使你的網站具有交互性。

Leaflet

Leaflet 是一個開源且適用於移動設備的交互式地圖 JavaScript 函式庫。它就像 Google Maps，但你可以成為老闆，決定你的地圖看起來和運作的方式！

現在我們已經介紹過這些技術，讓我們捲起袖子，開始建立我們自己的地圖應用程序吧！

建立我們的專案

首先，我們需要建立我們的專案。別擔心，這比組裝宜家傢俱還要容易！

第一步：創建 HTML 檔案

創建一個名為 index.html 的新檔案，並貼上以下代碼：

<!DOCTYPE html>
<html ng-app="leafletApp">
<head>
<title>我的超棒地圖應用程序</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
#map { height: 400px; }
</style>
</head>
<body ng-controller="MapController">
<div id="map"></div>
<script src="app.js"></script>
</body>
</html>

這個 HTML 檔案就像是我們應用的骨架。它包含了所有必要的庫（AngularJS 和 Leaflet）並設置了一個 div，我們的地圖將在其中呈現。

第二步：創建 JavaScript 檔案

現在，讓我們創建我們的 app.js 檔案。這裡就是魔術發生的地方！

var app = angular.module('leafletApp', []);

app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap 貢獻者'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('一個漂亮的 CSS3彈出窗口。<br>輕鬆自定義。')
.openPopup();
});

讓我們來分析一下：

  1. 我們創建了一個名為 'leafletApp' 的 Angular 模塊。
  2. 我們定義了一個名為 'MapController' 的控制器。
  3. 在控制器內部，我們初始化了一個 Leaflet 地圖，設置了它的視圖為倫敦（你可以將這個座標改為你喜歡的任何座標），並添加了一個 OpenStreetMap 的瓦片層。
  4. 最後，我們在地圖上添加了一個標記並附加了一個彈出窗口。

理解代碼

現在，我們已經有了基本的運行的地圖，讓我們深入了解一下我們代碼的每部分是幹什麼的。

HTML 檔案

<html ng-app="leafletApp">

這行代碼告訴 AngularJS 這是我們應用的根元素。這個元素內部的所有内容都將由 AngularJS 管理。

<body ng-controller="MapController">

這行代碼將我們的 MapController 與 HTML 的 body 相關聯。這意味著我們在 MapController 中定義的所有邏輯都將在 body 內部可用。

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

這是我們的地圖將被渲染的地方。Leaflet 將使用這個 div 來創建地圖。

JavaScript 檔案

var app = angular.module('leafletApp', []);

這行代碼創建了一個新的 AngularJS 模塊。把模塊想像成是應用程序不同部分的容器。

app.controller('MapController', function($scope) {
// 控制器邏輯在這裡
});

這是我們定義 MapController 的地方。$scope 是一個特殊對象，作為控制器和視圖（我們的 HTML）之間的橋樑。

var map = L.map('map').setView([51.505, -0.09], 13);

這行代碼初始化了我們的 Leaflet 地圖。'map' 是 div 的 id，[51.505, -0.09] 是我們地圖中心的坐標（緯度和經度），13 是縮放級別。

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap 貢獻者'
}).addTo(map);

這行代碼將一個瓦片層添加到我們的地圖上。瓦片層是地圖的實際圖像。這裡我們使用的是 OpenStreetMap 的瓦片。

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('一個漂亮的 CSS3彈出窗口。<br>輕鬆自定義。')
.openPopup();

這行代碼在我們的地圖上添加了一個標記，並為它綁定了一個彈出窗口，然後打開彈出窗口。

添加交互性

現在，我們已經有了基本的地圖，讓我們讓它更具交互性！我們將添加一個功能，使用戶可以點擊地圖來添加新標記。

更新你的 app.js 檔案如下：

var app = angular.module('leafletApp', []);

app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap 貢獻者'
}).addTo(map);

$scope.markers = [];

map.on('click', function(e) {
var marker = L.marker(e.latlng).addTo(map);
$scope.markers.push(marker);
$scope.$apply();
});

$scope.removeMarkers = function() {
$scope.markers.forEach(function(marker) {
map.removeLayer(marker);
});
$scope.markers = [];
};
});

現在，更新你的 index.html 以包含一個移除標記的按鈕：

<body ng-controller="MapController">
<div id="map"></div>
<button ng-click="removeMarkers()">移除所有標記</button>
<script src="app.js"></script>
</body>

讓我們來分析一下我們添加的内容：

  1. 我們創建了一個名為 $scope.markers 的數組來跟踪所有的標記。
  2. 我們為地圖添加了一個事件監聽器，當用戶點擊地圖時，會創建一個新標記。
  3. 我們創建了一個 removeMarkers 函數，從地圖中移除所有標記並清空我們的標記數組。
  4. 我們在 HTML 中添加了一個按鈕，當點擊時會調用 removeMarkers 函數。

結論

恭喜你！你剛剛使用 AngularJS 和 Leaflet 建立了你自己的第一個交互式地圖應用程序。你學會了如何設置基本的地圖、添加標記，甚至實現用戶交互。

記住，這只是開始。網頁地圖的世界是廣闊且令人興奮的，有著無窮無盡的自定義和功能添加的可能性。繼續探索，繼續編程，最重要的是，玩得開心！

這裡是一個我們使用的主要方法的總結表：

方法 描述
L.map() 在指定的 HTML 元素上創建一個地圖
setView() 設置地圖的視圖，包括中心和縮放級別
L.tileLayer() 添加一個瓦片層到地圖上
L.marker() 添加一個標記到地圖上
bindPopup() 綁定一個彈出窗口到標記上
openPopup() 打開標記的彈出窗口
on() 添加一個事件監聽器到地圖上
addTo() 將一個對象添加到地圖上
removeLayer() 從地圖中移除一個層

祝賀你，未來的製圖師！快樂製圖！

Credits: Image by storyset

上一教程:
AngularJS - 計時器應用程式
下一教程:
AngularJS - Last.fm 應用程式