1. Trước khi bắt đầu
Lớp học lập trình này nhằm giúp bạn hiểu cách tạo Bản đồ 3D đầu tiên bằng Bản đồ 3D chân thực trong Maps JavaScript. Bạn sẽ tìm hiểu kiến thức cơ bản về cách tải các thành phần phù hợp của API Maps JavaScript, hiển thị Bản đồ 3D đầu tiên và vẽ các tính năng trên đó.
Sản phẩm bạn sẽ tạo ra.
Trong lớp học lập trình này, bạn sẽ xây dựng một ứng dụng web 3D có các chức năng sau:
- Tải Maps JavaScript API một cách linh động.
- Hiển thị Bản đồ 3D lấy Tháp CN ở Toronto làm tâm điểm.
- Hiển thị ranh giới xung quanh một vị trí.
- Tắt các điểm yêu thích trên Bản đồ 3D.
- Đẩy ranh giới ra để bao phủ vị trí.
Kiến thức bạn sẽ học được
- Bắt đầu sử dụng Google Maps Platform.
- Tải động API Maps JavaScript từ mã JavaScript bằng tính năng Nhập thư viện động.
- Tải Bản đồ 3D bằng lớp Map3DElement.
- Sử dụng đa giác và tính năng đẩy để vẽ trên bản đồ.
2. Điều kiện tiên quyết
Bạn cần làm quen với các mục ở đây để hoàn tất Lớp học lập trình này. Nếu bạn đã quen thuộc với việc làm việc với Nền tảng Google Maps, hãy chuyển sang Lớp học lập trình!
Các sản phẩm bắt buộc của Nền tảng Google Maps
Trong lớp học lập trình này, bạn sẽ sử dụng các sản phẩm sau đây của Nền tảng Google Maps:
- API JavaScript cho Maps
Vâng, đó là tất cả những gì bạn cần làm để thêm Maps 3D vào trang của mình, không có gì khác, rất đơn giản!
Các yêu cầu khác đối với lớp học lập trình này
Để hoàn thành lớp học lập trình này, bạn cần có các tài khoản, dịch vụ và công cụ sau:
- Tài khoản Google Cloud đã bật tính năng thanh toán
- Khoá API Google Maps Platform đã bật API JavaScript của Maps
- Kiến thức cơ bản về JavaScript, HTML và CSS
- Trình soạn thảo văn bản hoặc IDE mà bạn chọn để lưu và chỉnh sửa tệp để xem
- Trình duyệt web để xem tệp trong khi bạn làm việc
3. Bắt đầu thiết lập
Thiết lập Nền tảng Google Maps
Nếu bạn chưa có tài khoản Google Cloud Platform và dự án đã bật tính năng thanh toán, vui lòng xem hướng dẫn Bắt đầu sử dụng Google Maps Platform để tạo tài khoản thanh toán và dự án.
- Trong Cloud Console, hãy nhấp vào trình đơn thả xuống của dự án rồi chọn dự án mà bạn muốn sử dụng cho lớp học lập trình này.
- Bật các API và SDK của Nền tảng Google Maps cần thiết cho lớp học lập trình này trong Google Cloud Marketplace. Để làm như vậy, hãy làm theo các bước trong video này hoặc tài liệu này.
- Tạo khoá API trong trang Thông tin xác thực của Cloud Console. Bạn có thể làm theo các bước trong video này hoặc tài liệu này. Tất cả yêu cầu gửi đến Nền tảng Google Maps đều yêu cầu khoá API.
4. Tải Maps JavaScript API
Sau khi làm theo tất cả các bước trong phần thiết lập, bạn có thể bắt đầu tạo Bản đồ 3D đầu tiên.
Tạo trang web đơn giản nhất mà bạn có thể tưởng tượng.
Trước tiên, chúng ta sẽ tạo một trang web rất cơ bản để lưu trữ tất cả mã của mình. Bạn có thể làm việc này trong bất kỳ trình chỉnh sửa hoặc nền tảng nào mà bạn chọn.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
Thêm mã và lưu tệp vào một vị trí có thể truy cập bằng tên như 3dmap.html, sau đó mở tệp này trong trình duyệt web để xem trạng thái hiện tại của trang và xem bạn có gặp lỗi nào không.
Giống như Bản đồ 2D, nền tảng của Bản đồ 3D là API Maps JavaScript, vì vậy, trước tiên, bạn cần tải API đó.
Bạn có thể thực hiện việc này theo một số cách, bạn có thể tìm thấy các cách này trong phần Tải API JavaScript của Maps của tài liệu.
Trong phần minh hoạ này, chúng ta sẽ sử dụng phương thức Nhập thư viện động hiện đại hơn vì phương thức này cho phép bạn chỉ kiểm soát các phần tử cần tải, giúp tiết kiệm dung lượng tải xuống và thời gian khởi động.
Thêm trình tải động
Để sử dụng trình tải động, hãy nhớ thêm thẻ tập lệnh sau vào trang web của bạn, đồng thời thêm KHÓA API của riêng bạn vào vị trí thích hợp (mà bạn đã nhận được ở bước 2). Đặt thẻ tập lệnh này giữa các phần nội dung của trang web cơ bản.
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
Xin lưu ý rằng ở giai đoạn phát hành sản phẩm này, chúng tôi đang sử dụng nhánh alpha của API để truy cập vào Maps 3D. Bản dựng này chứa các tính năng thử nghiệm nhất của sản phẩm và cho phép bạn kiểm thử mã sử dụng sớm khi mã đang được phát triển để bạn có thể sẵn sàng sử dụng mã đó tại thời điểm phát hành.
Bây giờ, bạn sẽ có một trang web cơ bản chứa trình tải động (nếu bạn mở trang, chế độ xem sẽ trống nhưng không có lỗi). Chúng ta đã sẵn sàng thêm Bản đồ 3D.
Nếu vì lý do nào đó mà mã của bạn không hoạt động, bạn có thể chuyển đến Bước 6 và so sánh mã đó với kết quả cuối cùng để xem lỗi xảy ra ở đâu.
Để tìm hiểu lý do trang có thể không hoạt động, hãy xem bảng điều khiển lỗi trong trình duyệt để gỡ lỗi. Trang lỗi đưa ra hướng dẫn về cách thực hiện việc này cho các trình duyệt khác nhau, đồng thời giải thích nhiều thông báo lỗi và đưa ra một số lý do phổ biến khiến API có thể không hoạt động. Đây là một tài nguyên hữu ích để sử dụng trong suốt quá trình phát triển nhằm tìm ra vấn đề có thể xảy ra với bất kỳ hoạt động triển khai nào.
5. Hiển thị bản đồ
Vậy là chúng ta đã sẵn sàng để thêm Bản đồ 3D đầu tiên vào trang!
Bản đồ 3D được tạo bằng lớp google.maps.maps3d.Map3DElement, cho phép chúng ta tạo và xử lý các thực thể Bản đồ 3D. Trong lớp học lập trình này, chúng ta sẽ làm việc trực tiếp với đối tượng Bản đồ 3D thay vì thông qua thẻ HTML.
Tạo Hàm khởi tạo và tải thư viện
Trước tiên, chúng ta sẽ tạo một hàm tải phần tử vào trang. Hãy xem mã, trước tiên, chúng ta tạo một hàm không đồng bộ để đảm bảo rằng toàn bộ phần tử được tải trước khi tiếp tục với phần còn lại của mã. Sau đó, chúng ta chạy hàm init khi trang tải.
Thêm đoạn mã này sau tập lệnh tải trong phần nội dung của trang.
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
}
init();
</script>
Xin lưu ý rằng chúng ta sử dụng biểu thức await để đảm bảo rằng thư viện được tải trước khi tiếp tục.
Tạo thành phần bản đồ 3D và chỉ định vị trí
Tiếp theo, chúng ta cần chỉ định vị trí mà chúng ta muốn có chế độ xem bản đồ. Đối với bản đồ 3D, bạn có thể sử dụng một số thông số để đặt chế độ xem. Đây là các tham số của máy ảnh ảo mô tả những gì bạn đang nhìn thấy trong cảnh.
Hãy tạo một chế độ xem Tháp CN có dạng như sau.
Trước tiên, chúng ta cần chỉ định toạ độ mà chúng ta muốn xem. Các thành phần này bao gồm hai thành phần hiển thị khác nhau
- Điểm mà chúng ta muốn xem xét, bao gồm cả độ cao của điểm đó.
- Khoảng cách và hướng của máy ảnh ảo đang nhìn vào điểm đó.
Nếu xem hình ảnh sau, bạn có thể hiểu được cách hoạt động của các chế độ cài đặt này.
Tâm của phần tử là điểm bạn đang nhìn, trong khi phạm vi là khoảng cách từ bạn đến đối tượng và độ nghiêng là góc mà bạn đang xem hình ảnh. Bạn cũng có thể đặt tiêu đề và độ nghiêng của đối tượng nếu muốn kiểm soát các thông số đó, nhưng chúng ta sẽ không sử dụng thông số này ở đây.
Bây giờ, chúng ta sẽ tạo Bản đồ 3D trên trang, thêm mã sau vào trang trong phần khởi tạo sau khi nhập thư viện.
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID,
});
document.body.append(map3DElement);
Trước tiên, chúng ta tạo phần tử và đặt các tham số vị trí thích hợp, sau đó thêm thành phần trên trang (chúng ta có thể chỉ định thành phần đó cho một div hiện có nếu muốn).
Mã của bạn hiện sẽ có dạng như ví dụ sau:
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID
});
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
Bây giờ, chúng ta có thể lưu tệp và mở trang trong trình duyệt để xem trang đó có hoạt động hay không. Chúng ta sẽ thấy máy ảnh nhìn xuống tháp như trong hình. Hãy thử nghiệm trước khi tiếp tục và thêm một hộp lên trên tháp.
6. Thêm và đẩy các đặc điểm
Bây giờ, chúng ta đã có một Bản đồ 3D, hãy tiếp tục và làm nổi bật một đối tượng để người dùng biết đó là một mục đáng quan tâm. Trong trường hợp này, chúng ta sẽ sử dụng đa giác và hàm đẩy để tạo một hộp xung quanh tháp CN, để hộp đó trông giống như chế độ xem sau.
Ẩn nội dung lộn xộn
Điều đầu tiên bạn có thể nhận thấy là chúng tôi đã tắt các điểm yêu thích. Trong bản đồ này, chúng ta muốn tiêu điểm là chính tháp nên cần loại bỏ các thành phần hình ảnh khác.
Để làm việc này, chúng ta cần thêm thay đổi mã để ẩn nhãn. Cập nhật dòng chế độ của bản đồ thành SATELLITE để ẩn các điểm.
mode: MapMode.SATELLITE,
Việc đặt thuộc tính này sẽ vô hiệu hoá các nhãn trên bản đồ, không chỉ bao gồm các địa điểm yêu thích mà còn bao gồm cả đường và đường ranh giới, đồng thời tạo ra chế độ xem "sạch" của vị trí.
Thêm và tạo kiểu cho đa giác
Bước tiếp theo là thêm đa giác vào trang. Bạn có thể thực hiện việc này theo hai bước. Trước tiên, chúng ta cần tải các hàm chứa thông tin bắt buộc và tiếp theo là chỉ định thông tin chi tiết về kiểu của đa giác, chẳng hạn như màu sắc hoặc liệu đa giác có hiển thị phía sau các đối tượng khác hay không.
Trước tiên, chúng ta thêm các lớp bắt buộc vào trang bằng dòng mã sau.
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
Thao tác này sẽ tải các lớp Polygon3DElement và AltitudeMode vào trang. Đây là các lớp cần thiết để thêm đối tượng đa giác vào thành phần hiển thị.
Một đa giác có thể có một số chế độ cài đặt khác nhau có thể kiểm soát chế độ xem, từ chiều rộng nét vẽ, màu sắc (theo tên hoặc giá trị hex) và độ mờ của đường viền và chế độ cài đặt tô, để kiểm soát xem chế độ xem có hiển thị phía sau các đối tượng hoặc toà nhà khác hay không, ví dụ : vẽ các đoạn bị che khuất. Bạn có thể tìm thêm thông tin chi tiết trong tài liệu về lớp Polygon3DElement.
Tính năng khác mà chúng ta cần thiết lập là để vẽ Đa giác theo cách đẩy ra ngoài. Điều này có nghĩa là vẽ một đa giác ở độ cao đã đặt rồi kéo dài đa giác đó xuống mặt đất. Điều này giúp đa giác có chiều cao như một hộp (bạn có thể thấy trong hình trên). Điều này cũng yêu cầu chúng ta đặt chế độ độ cao trên đa giác, đó là lý do chúng ta cần tải các hằng số AltitudeMode ở trên. Để đẩy một đa giác, bạn cần đặt giá trị này thành ABSOLUTE hoặc RELATIVE_TO_GROUND để có được vị trí chính xác từ độ cao trên các đỉnh đa giác.
Mã này tạo một đối tượng cố định chứa các thuộc tính này, sau đó có thể dùng để tạo đối tượng Polygon3DElement như sau:
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
Bây giờ, chúng ta đã tạo đối tượng đa giác và cũng phải đặt toạ độ địa lý của đối tượng đó. Đa giác có thể có cả toạ độ bên trong và bên ngoài tuỳ thuộc vào cách đa giác được biểu thị, innerCoordinates cho biết hình dạng của các phần cắt trong đa giác và outerCoordinates xác định ranh giới bên ngoài của đa giác. Vì đây là đa giác chứ không phải đường thẳng nên toạ độ cần bắt đầu và kết thúc tại cùng một điểm để tạo thành hình dạng hoàn chỉnh.
Bạn có thể chỉ định toạ độ bằng cách sử dụng một mảng các đối tượng hoặc giá trị cố định LatLng hoặc LatLngAltitude và chúng ta có thể thấy điều này đối với đa giác cơ bản.
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
Bây giờ, chúng ta đã thiết lập kiểu và toạ độ cho đa giác, chúng ta có thể thêm đa giác vào trang. Đa giác là các phần tử con của Phần tử bản đồ và cần được thêm vào một đối tượng bản đồ hiện có trong trang. Thêm mã sau vào trang.
map3DElement.append(towerPolygon);
Sau khi có mã này, chúng ta sẽ có toàn bộ quá trình triển khai như sau, như minh hoạ tại đây (ngoại trừ mã này sẽ có khoá API của riêng bạn). Chúng ta đã sẵn sàng chạy trang và xem kết quả.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.SATELLITE,
});
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
fillOpacity: 0.2,
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
map3DElement.append(towerPolygon);
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
Nếu mã chính xác, bạn sẽ thấy một trang có Bản đồ 3D và đa giác sau.
Bạn đã tạo thành công bản đồ 3D đầu tiên bằng Google Maps Platform, bao gồm cả việc tải API JavaScript của Maps, tạo bản đồ 3D và thêm đa giác được đẩy ra.
7. Tiếp theo là gì?
Trong lớp học lập trình này, bạn đã tìm hiểu những kiến thức cơ bản về những việc bạn có thể làm với API Maps JavaScript. Tiếp theo, hãy thử thêm một số tính năng sau vào bản đồ:
- Thêm một nút để bật và tắt các điểm yêu thích.
- Thêm một số đường cho thấy tuyến đường đến và đi từ nhiều nơi.
- Đặt một số hạn chế về ranh giới để kiểm soát vị trí người dùng có thể di chuyển thành phần hiển thị.
- Hãy xem các thư viện bổ sung có sẵn cho API Maps JavaScript để bật các dịch vụ bổ sung, chẳng hạn như Địa điểm hoặc Chỉ đường.
Để tiếp tục tìm hiểu thêm về các cách bạn có thể làm việc với Nền tảng Google Maps và 3D trên web, hãy xem các đường liên kết sau: