Bắt đầu

Chọn nền tảng: Android iOS JavaScript

Làm theo các bước sau để thiết lập điểm đánh dấu nâng cao.

Nhận khoá API và bật Maps JavaScript API

Trước khi sử dụng điểm đánh dấu nâng cao, bạn cần có một dự án Cloud có tài khoản thanh toán và đã bật Maps JavaScript API. Để tìm hiểu thêm, hãy xem bài viết Thiết lập dự án trên Google Cloud.

Lấy khoá API

Tạo mã bản đồ

Để tạo mã bản đồ mới, hãy làm theo các bước trong phần Tuỳ chỉnh trên đám mây. Đặt Loại bản đồ thành JavaScript và chọn tuỳ chọn Vector (Vectơ) hoặc Đường quét.

Tạo mã bản đồ vectơ

Cập nhật mã khởi tạo bản đồ của bạn

Để làm được điều này, bạn phải có mã bản đồ mà bạn vừa tạo. Bạn có thể tìm thấy ứng dụng này trên trang Quản lý Maps của mình.

  1. Tải Maps JavaScript API.

  2. Tải thư viện điểm đánh dấu nâng cao từ bên trong hàm async khi cần:

    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  3. Cung cấp mã bản đồ khi bạn tạo thực thể cho bản đồ bằng thuộc tính mapId. Đây có thể là mã bản đồ mà bạn cung cấp hoặc DEMO_MAP_ID.

    const map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'YOUR_MAP_ID'
});

Kiểm tra các chức năng của bản đồ (không bắt buộc)

Điểm đánh dấu nâng cao yêu cầu ID bản đồ. Nếu thiếu mã bản đồ hoặc mã bản đồ không hợp lệ được truyền, thì điểm đánh dấu nâng cao sẽ không thể tải được. Để khắc phục sự cố, bạn có thể thêm trình nghe mapcapabilities_changed để đăng ký các thay đổi về chức năng của bản đồ. Mã này sẽ cho biết liệu các điều kiện sau đây đã được đáp ứng hay chưa:

  • Mã bản đồ hợp lệ đang được sử dụng.
  • Mã bản đồ được liên kết với một bản đồ vectơ nếu các đối tượng yêu cầu bản đồ vectơ đang được sử dụng.

Việc sử dụng Tính năng của bản đồ là không bắt buộc và chỉ nên dùng cho mục đích kiểm thử và khắc phục sự cố hoặc cho mục đích dự phòng trong thời gian chạy.

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

Các bước tiếp theo

Tạo điểm đánh dấu nâng cao mặc định