Chế độ bản đồ 3D

Các chế độ bản đồ 3D sau đây có trong Maps JavaScript API:

  • ROADMAP hiển thị chế độ xem bản đồ đường đi mặc định có nhãn bản đồ cơ sở.
  • SATELLITE hiển thị bản đồ chân thực như ảnh chụp dựa trên hình ảnh chụp từ trên không.
  • HYBRID hiển thị chế độ xem bản đồ vệ tinh có nhãn bản đồ cơ sở.

Sau đây là ví dụ về bản đồ 3D ở chế độ ROADMAP:

TypeScript

async function init() {
  const { Map3DElement } = await google.maps.importLibrary('maps3d');

  const map = new Map3DElement({
    center: {
      lat: 37.79334535092104,
      lng: -122.400742086205,
      altitude: 0,
    },
    range: 2400,
    tilt: 65,
    heading: 0,
    mode: 'ROADMAP',
    internalUsageAttributionIds: ['gmp_git_jsapisamples_v1_3d-rendering'],
  });

  document.body.append(map);

  // Create the controls container
  const controls = document.createElement('div');
  controls.id = 'controls';
  controls.classList.add('map-mode-control');

  // Create the select element
  const selector = document.createElement('select');
  selector.id = 'map-mode';

  const modes = ['ROADMAP', 'SATELLITE', 'HYBRID'];
  modes.forEach((modeName) => {
    const option = document.createElement('option');
    option.value = modeName;
    option.textContent = modeName;
    if (modeName === 'ROADMAP') {
      option.selected = true;
    }
    selector.appendChild(option);
  });

  selector.addEventListener('change', (event) => {
    map.mode = (event.target as HTMLSelectElement).value;
  });

  controls.appendChild(selector);
  document.body.appendChild(controls);
}

init();
index.ts

JavaScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');
    const map = new Map3DElement({
        center: {
            lat: 37.79334535092104,
            lng: -122.400742086205,
            altitude: 0,
        },
        range: 2400,
        tilt: 65,
        heading: 0,
        mode: 'ROADMAP',
        internalUsageAttributionIds: ['gmp_git_jsapisamples_v1_3d-rendering'],
    });
    document.body.append(map);
    // Create the controls container
    const controls = document.createElement('div');
    controls.id = 'controls';
    controls.classList.add('map-mode-control');
    // Create the select element
    const selector = document.createElement('select');
    selector.id = 'map-mode';
    const modes = ['ROADMAP', 'SATELLITE', 'HYBRID'];
    modes.forEach((modeName) => {
        const option = document.createElement('option');
        option.value = modeName;
        option.textContent = modeName;
        if (modeName === 'ROADMAP') {
            option.selected = true;
        }
        selector.appendChild(option);
    });
    selector.addEventListener('change', (event) => {
        map.mode = event.target.value;
    });
    controls.appendChild(selector);
    document.body.appendChild(controls);
}
init();
index.js

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

gmp-map-3d {
  height: 100%;
  width: 100%;
}

.map-mode-control {
  position: fixed;
  bottom: 24px;
  right: 75px;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  z-index: 1;
}

.map-mode-control select {
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid #dadce0;
  border-radius: 6px;
  background-color: white;
  color: #3c4043;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.map-mode-control select:hover {
  border-color: #1a73e8;
}

.map-mode-control select:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

style.css

HTML

<html>

<head>
  <title>3d-map-roadmap</title>

  <link rel="stylesheet" type="text/css" href="./style.css" />
  <script type="module" src="./index.js"></script>
  <!-- prettier-ignore -->
  <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha" });</script>
</head>

<body>
</body>

</html>
index.html

Thử mẫu

Lợi ích chính

  • Quả địa cầu: giờ đây, bạn có thể cung cấp trải nghiệm bản đồ đầy đủ cho nhiều trường hợp sử dụng, tận dụng hình ảnh bản đồ trừu tượng và hình ảnh bản đồ chân thực như ảnh chụp.
  • Tuỳ chỉnh: Giờ đây, bạn có thể chuyển đổi giữa các chế độ bằng một nút hoặc hàm tuỳ chỉnh mà không cần tải lại thành phần tổng thể.