AngularJS - 地圖應用程式

你好，有志於網頁開發的們！今天，我們將踏上一段令人興奮的旅程，進入AngularJS和Google Maps的世界。在這個教學的結束時，你將能夠創建屬於自己的互動地圖應用程式。這不是很酷嗎？讓我們一起來看看！

AngularJS - Maps Application

AngularJS 和 Google Maps 的介紹

在我們開始編程之前，讓我們先了解AngularJS和Google Maps是什麼。

AngularJS是一個強大的JavaScript框架，它幫助我們建立動態網頁應用程式。它就像是HTML的超級英雄助手，為HTML賦予超能力，創建有互動性和反應性的網頁。

另一方面，Google Maps是一個網頁地圖服務，提供關於世界各地地理區域和地點的詳細信息。這就像是在指尖上擁有整個世界！

當我們結合這兩種技術時，我們可以創建令人驚奇的地圖基礎應用程式。是不是很興奮？

建立我們的專案

步驟 1：引入 AngularJS 和 Google Maps API

首先，我們需要在HTML文件中引入必要的庫。以下是如何操作的：

<!DOCTYPE html>
<html ng-app="mapApp">
<head>
<title>我的 AngularJS 地圖應用程式</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<!-- 我們的應用將放在這裡 -->
<script src="app.js"></script>
</body>
</html>

在這段代碼中，我們引入了AngularJS和Google Maps API。將'YOUR_API_KEY'替換為你的實際Google Maps API密钥。如果你還沒有，別擔心；我們稍後會介紹如何獲取。

步驟 2：創建我們的 AngularJS 應用程式

現在，讓我們創建我們的AngularJS應用程式。在一個名為app.js的新文件中，添加以下代碼：

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

app.controller('MapController', function($scope) {
// 我們將在這裡添加我們的地圖邏輯
});

這段代碼創建了一個名為'mapApp'的AngularJS模塊和一個名為'MapController'的控制器。將模塊看作是我們應用的容器，將控制器看作是將管理我們地圖的大腦。

建立我們的地圖

步驟 3：初始化地圖

讓我們在控制器中添加一些代碼來初始化我們的地圖：

app.controller('MapController', function($scope) {
$scope.initMap = function() {
var mapOptions = {
center: new google.maps.LatLng(40.7128, -74.0060),
zoom: 12
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
});

這個函數在紐約市（你可以將坐標更改為你喜歡的任何位置）中心創建了一個新的Google Maps。zoom級別決定了地圖的縮放程度。

步驟 4：將地圖添加到我們的 HTML 中

現在，讓我們在HTML中添加一個div，地圖將在其中顯示：

<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<script src="app.js"></script>
</body>

ng-controller指令告訴AngularJS對這部分頁面使用我們的MapController。ng-init指令在頁面加載時調用我們的initMap函數。

添加標記

步驟 5：創建一個添加標記的函數

讓我們增強我們的控制器以在我們的地圖上添加標記：

app.controller('MapController', function($scope) {
var map;

$scope.initMap = function() {
var mapOptions = {
center: new google.maps.LatLng(40.7128, -74.0060),
zoom: 12
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

$scope.addMarker = function(lat, lng, title) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: title
});
}
});

這個新的addMarker函數在我們指定的緯度和經度創建一個標記，並具有給定的標題。

步驟 6：使用標記函數

現在，讓我們使用我們的新函數來添加一些標記：

<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<button ng-click="addMarker(40.7484, -73.9857, '帝國大廈')">添加帝國大廈標記</button>
<button ng-click="addMarker(40.7484, -73.9857, '自由女神像')">添加自由女神像標記</button>
<script src="app.js"></script>
</body>

這些按鈕在點擊時將添加帝國大廈和自由女神像的標記。

處理用戶輸入

步驟 7：創建一個輸入表單

讓我們允許用戶添加他們自己的標記：

<form ng-submit="addCustomMarker()">
<input type="text" ng-model="newMarker.title" placeholder="標題">
<input type="number" ng-model="newMarker.lat" placeholder="緯度">
<input type="number" ng-model="newMarker.lng" placeholder="經度">
<button type="submit">添加標記</button>
</form>

步驟 8：處理表單提交

在控制器中添加以下函數：

$scope.newMarker = {};

$scope.addCustomMarker = function() {
if($scope.newMarker.title && $scope.newMarker.lat && $scope.newMarker.lng) {
$scope.addMarker($scope.newMarker.lat, $scope.newMarker.lng, $scope.newMarker.title);
$scope.newMarker = {};
}
}

這個函數檢查所有字段是否填寫，添加標記，然後清空表單。

結論

恭喜你！你剛剛建立了你的第一個AngularJS地圖應用程式。現在，你可以顯示地圖，添加預定義的標記，甚至讓用戶添加他們自己的標記。這只是開始——你可以用AngularJS和Google Maps做更多的事情。

記住，成為一名出色的程序員的關鍵是練習。試著為你的地圖應用添加更多功能。當標記被點擊時顯示信息怎麼樣？或者添加不同類型的標記？可能性無限！

未來的科技巫師們，快樂編程！



| 方法 | 描述 |
|--------|-------------|
| `initMap()` | 初始化Google Maps |
| `addMarker(lat, lng, title)` | 在指定的緯度和經度上添加標記 |
| `addCustomMarker()` | 處理用戶輸入以添加自定義標記 |

Credits: Image by storyset