Tiếng Việt

AngularJS 教學

AngularJS 應用

AngularJS - Ứng dụng Leaflet: Hướng dẫn cho người mới bắt đầu

Xin chào, những ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của AngularJS và Leaflet. Đừng lo lắng nếu những thuật ngữ này听起来 như một ngôn ngữ nước ngoài - vào cuối bài hướng dẫn này, bạn sẽ nói thành thạo "bản đồ web" trong tích tắc!

AngularJS - Leaflet Application

AngularJS và Leaflet là gì?

Trước khi chúng ta nhảy vào mã, hãy phân tích những công nghệ này là gì:

AngularJS

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. Hãy tưởng tượng nó như một trợ lý siêu thông minh tổ chức mã của bạn và làm cho trang web của bạn trở nên tương tác.

Leaflet

Leaflet là thư viện JavaScript mã nguồn mở cho các bản đồ tương tác thân thiện với di động. Nó giống như Google Maps, nhưng bạn là người quyết định chính xác cách bản đồ của bạn trông và hoạt động!

Bây giờ chúng ta đã hoàn thành phần giới thiệu, hãy gấp tay áo lên và bắt đầu xây dựng ứng dụng bản đồ riêng của chúng ta!

Thiết lập dự án của chúng ta

Trước tiên, chúng ta cần thiết lập dự án của mình. Đừng lo lắng, nó dễ dàng hơn việc组装 nội thất IKEA!

Bước 1: Tạo tệp HTML

Tạo một tệp mới có tên index.html và dán mã sau:

<!DOCTYPE html>
<html ng-app="leafletApp">
<head>
<title>Ứng dụng Bản đồ Tuyệt vời của Tôi</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>

Tệp HTML này giống như khung xương của ứng dụng chúng ta. Nó bao gồm tất cả các thư viện cần thiết (AngularJS và Leaflet) và thiết lập một div để bản đồ của chúng ta sẽ tồn tại.

Bước 2: Tạo tệp JavaScript

Bây giờ, hãy tạo tệp app.js của chúng ta. Đây là nơi mà phép thuật xảy ra!

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 contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('Một popup CSS3 đẹp.<br> Dễ dàng tùy chỉnh.')
.openPopup();
});

Hãy phân tích mã này:

  1. Chúng ta tạo một module AngularJS có tên 'leafletApp'.
  2. Chúng ta xác định một controller có tên 'MapController'.
  3. Trong controller, chúng ta khởi tạo một bản đồ Leaflet, đặt视图 của nó ở London (bạn có thể thay đổi này thành bất kỳ tọa độ nào bạn thích), và thêm một lớp bản đồ từ OpenStreetMap.
  4. Cuối cùng, chúng ta thêm một marker vào bản đồ của chúng ta với một popup.

Hiểu mã

Bây giờ chúng ta đã có bản đồ cơ bản của mình hoạt động, hãy sâu hơn vào từng phần của mã chúng ta.

Tệp HTML

<html ng-app="leafletApp">

Dòng này告诉 AngularJS rằng này là phần tử gốc của ứng dụng chúng ta. Mọi thứ bên trong phần tử này sẽ được quản lý bởi AngularJS.

<body ng-controller="MapController">

Dòng này liên kết MapController với thân của HTML. Điều này có nghĩa là tất cả logic chúng ta xác định trong MapController sẽ khả dụng trong thân HTML.

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

Đây là nơi bản đồ của chúng ta sẽ được render. Leaflet sẽ sử dụng div này để tạo bản đồ.

Tệp JavaScript

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

Dòng này tạo một module AngularJS mới. Hãy tưởng tượng một module như một容器 cho các phần khác nhau của ứng dụng bạn.

app.controller('MapController', function($scope) {
// Logic của controller ở đây
});

Đây là nơi chúng ta xác định MapController. $scope là một đối tượng đặc biệt đóng vai trò cầu nối giữa controller và view (HTML của chúng ta).

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

Dòng này khởi tạo bản đồ Leaflet của chúng ta. 'map' là id của div, [51.505, -0.09] là tọa độ của trung tâm bản đồ (vĩ độ và kinh độ), và 13 là mức zoom.

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

Điều này thêm một lớp bản đồ vào bản đồ của chúng ta. Lớp bản đồ là các hình ảnh bản đồ thực tế. Ở đây chúng ta sử dụng các lớp bản đồ từ OpenStreetMap.

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('Một popup CSS3 đẹp.<br> Dễ dàng tùy chỉnh.')
.openPopup();

Điều này thêm một marker vào bản đồ của chúng ta tại tọa độ chỉ định, gắn một popup vào nó, và mở popup.

Thêm tính tương tác

Bây giờ chúng ta đã có bản đồ cơ bản, hãy làm cho nó trở nên tương tác hơn! Chúng ta sẽ thêm một tính năng cho phép người dùng nhấp vào bản đồ để thêm các marker mới.

Cập nhật tệp app.js của bạn như sau:

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 contributors'
}).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 = [];
};
});

Bây giờ, cập nhật index.html của bạn để bao gồm một nút xóa marker:

<body ng-controller="MapController">
<div id="map"></div>
<button ng-click="removeMarkers()">Xóa tất cả marker</button>
<script src="app.js"></script>
</body>

Hãy phân tích những gì chúng ta đã thêm:

  1. Chúng ta tạo một mảng $scope.markers để theo dõi tất cả các marker của chúng ta.
  2. Chúng ta thêm một listener sự kiện vào bản đồ rằng tạo một marker mới mỗi khi người dùng nhấp vào bản đồ.
  3. Chúng ta tạo một hàm removeMarkers xóa tất cả các marker khỏi bản đồ và xóa mảng marker.
  4. Chúng ta thêm một nút vào HTML rằng gọi hàm removeMarkers khi được nhấp.

Kết luận

Chúc mừng! Bạn đã vừa xây dựng ứng dụng bản đồ tương tác đầu tiên của mình sử dụng AngularJS và Leaflet. Bạn đã học cách thiết lập một bản đồ cơ bản, thêm marker, và thậm chí triển khai tương tác người dùng.

Nhớ rằng, đây chỉ là bắt đầu. Thế giới bản đồ web rất rộng lớn và thú vị, với vô số khả năng tùy chỉnh và thêm tính năng. Hãy tiếp tục khám phá, tiếp tục lập trình, và quan trọng nhất, hãy vui vẻ!

Dưới đây là bảng tóm tắt các phương thức chính chúng ta đã sử dụng:

Phương thức Mô tả
L.map() Tạo một bản đồ trên phần tử HTML chỉ định
setView() Đặt视图 của bản đồ với một trung tâm và mức zoom
L.tileLayer() Thêm một lớp bản đồ vào bản đồ
L.marker() Thêm một marker vào bản đồ
bindPopup() Gắn một popup vào một marker
openPopup() Mở popup cho một marker
on() Thêm một listener sự kiện vào bản đồ
addTo() Thêm một đối tượng vào bản đồ
removeLayer() Xóa một lớp khỏi bản đồ

Chúc mừng, những người bản đồ tương lai!

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Ứng dụng Đ计时器
Hướng Dẫn Tiếp Theo:
AngularJS - Ứng dụng Last.fm