AngularJS - Ứng dụng Bản đồ
Xin chào các bạn nhà phát triển web đang trên đà trở thành cao thủ! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình đầy thú vị vào thế giới của AngularJS và Google Maps. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể tạo ra chính ứng dụng bản đồ tương tác của riêng mình. Đó có phải là điều tuyệt vời không? Hãy cùng nhau khám phá!
Giới thiệu về AngularJS và Google Maps
Trước khi bắt đầu viết mã, hãy cùng nhau hiểu về AngularJS và Google Maps là gì.
AngularJS là một khung công tác JavaScript mạnh mẽ giúp chúng ta xây dựng các ứng dụng web động. Nó giống như một người bạn siêu anh hùng, hỗ trợ HTML của bạn, mang lại cho nó những siêu năng lực để tạo ra các trang web tương tác và phản hồi.
Google Maps, mặt khác, là một dịch vụ bản đồ web cung cấp thông tin chi tiết về các khu vực địa lý và các địa điểm trên toàn thế giới. Nó giống như việc bạn có cả thế giới trong lòng bàn tay!
Khi kết hợp hai công nghệ này, chúng ta có thể tạo ra những ứng dụng bản đồ tuyệt vời. Thật thú vị phải không?
Thiết lập Dự án của Chúng Ta
Bước 1: Chèn AngularJS và API Google Maps
Trước tiên, chúng ta cần chèn các thư viện cần thiết vào tệp HTML của mình. Dưới đây là cách chúng ta làm:
<!DOCTYPE html>
<html ng-app="mapApp">
<head>
<title>Ứng dụng Bản đồ AngularJS của Tôi</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>
<!-- Ứng dụng của chúng ta sẽ được hiển thị ở đây -->
<script src="app.js"></script>
</body>
</html>Trong đoạn mã này, chúng ta đang chèn AngularJS và API Google Maps. Thay thế 'YOUR_API_KEY' bằng khóa API Google Maps thực tế của bạn. Đừng lo lắng nếu bạn chưa có một khóa; chúng ta sẽ cover cách lấy nó sau.
Bước 2: Tạo Ứng dụng AngularJS của Chúng Ta
Bây giờ, hãy tạo ứng dụng AngularJS của chúng ta. Trong một tệp mới có tên app.js, thêm đoạn mã sau:
var app = angular.module('mapApp', []);
app.controller('MapController', function($scope) {
// Chúng ta sẽ thêm logic bản đồ ở đây
});Đoạn mã này tạo một mô-đun AngularJS có tên 'mapApp' và một bộ điều khiển có tên 'MapController'. Hãy tưởng tượng mô-đun như một容器 cho ứng dụng của chúng ta, và bộ điều khiển như não sẽ quản lý bản đồ của chúng ta.
Xây dựng Bản Đồ của Chúng Ta
Bước 3: Khởi tạo Bản Đồ
Hãy thêm một đoạn mã vào bộ điều khiển của chúng ta để khởi tạo bản đồ:
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);
}
});Hàm này tạo một bản đồ Google mới được trung tâm ở New York City (bạn có thể thay đổi tọa độ thành bất kỳ vị trí nào bạn thích). Mức zoom xác định mức độ phóng to của bản đồ.
Bước 4: Thêm Bản Đồ vào HTML
Bây giờ, hãy thêm một div vào HTML của chúng ta để hiển thị bản đồ:
<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<script src="app.js"></script>
</body>Đ指令 ng-controller cho biết AngularJS nên sử dụng bộ điều khiển MapController cho phần này của trang. Đ指令 ng-init gọi hàm initMap khi trang tải.
Thêm các Điểm Đánh Dấu
Bước 5: Tạo Hàm Thêm Điểm Đánh Dấu
Hãy nâng cấp bộ điều khiển của chúng ta để thêm các điểm đánh dấu vào bản đồ:
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
});
}
});Hàm mới addMarker này tạo một điểm đánh dấu tại tọa độ lat và lng được chỉ định, với tiêu đề cho điểm đánh dấu.
Bước 6: Sử dụng Hàm Điểm Đánh Dấu
Bây giờ, hãy sử dụng hàm mới của chúng ta để thêm một số điểm đánh dấu:
<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<button ng-click="addMarker(40.7484, -73.9857, 'Tòa nhà Empire State')">Thêm Điểm Đánh Dấu Tòa nhà Empire State</button>
<button ng-click="addMarker(40.7484, -73.9857, 'Bức tượng Nữ thần Tự do')">Thêm Điểm Đánh Dấu Bức tượng Nữ thần Tự do</button>
<script src="app.js"></script>
</body>Những nút này sẽ thêm các điểm đánh dấu cho Tòa nhà Empire State và Bức tượng Nữ thần Tự do khi được nhấp.
Xử lý Đầu Vào Người Dùng
Bước 7: Tạo một Form Đầu Vào
Hãy cho phép người dùng thêm các điểm đánh dấu của riêng họ:
<form ng-submit="addCustomMarker()">
<input type="text" ng-model="newMarker.title" placeholder="Tiêu đề">
<input type="number" ng-model="newMarker.lat" placeholder="Vĩ độ">
<input type="number" ng-model="newMarker.lng" placeholder="Kinh độ">
<button type="submit">Thêm Điểm Đánh Dấu</button>
</form>Bước 8: Xử lý Gửi Form
Thêm hàm này vào bộ điều khiển của bạn:
$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 = {};
}
}Hàm này kiểm tra xem tất cả các trường đã được điền đầy đủ hay chưa, thêm điểm đánh dấu, và sau đó làm sạch form.
Kết Luận
Chúc mừng! Bạn vừa xây dựng xong ứng dụng Bản đồ AngularJS đầu tiên của mình. Bây giờ bạn có thể hiển thị bản đồ, thêm các điểm đánh dấu đã định nghĩa trước, và thậm chí cho phép người dùng thêm các điểm đánh dấu của riêng họ. Đây chỉ là bước đầu - có rất nhiều điều bạn có thể làm với AngularJS và Google Maps.
Nhớ rằng, chìa khóa để trở thành một nhà lập trình giỏi là thực hành. Hãy thử thêm nhiều tính năng hơn vào ứng dụng bản đồ của bạn. Bạn có thể hiển thị thông tin khi một điểm đánh dấu được nhấp không? Hoặc thêm các loại điểm đánh dấu khác nhau? Các khả năng là không giới hạn!
Chúc các bạn lập trình vui vẻ, các nhà công nghệ tương lai!
Credits: Image by storyset