Di chuyển sang điểm đánh dấu nâng cao

Kể từ ngày 21 tháng 2 năm 2024 (phiên bản 3.56), google.maps.Marker sẽ ngừng hoạt động. Bạn nên chuyển sang lớp google.maps.marker.AdvancedMarkerElement mới. Điểm đánh dấu nâng cao mang lại những cải tiến đáng kể so với lớp google.maps.Marker cũ. Tìm hiểu thêm về việc ngừng sử dụng này

Để cập nhật điểm đánh dấu cũ thành điểm đánh dấu nâng cao, hãy làm theo các bước sau:

  1. Thêm mã để nhập thư viện điểm đánh dấu (xem các bước bên dưới).
  2. Thay đổi google.maps.Marker thành google.maps.marker.AdvancedMarkerElement; nếu câu lệnh nhập khai báo AdvancedMarker, bạn có thể bỏ qua đường dẫn đủ điều kiện.
  3. Thêm mã bản đồ vào mã khởi chạy bản đồ. Ví dụ: mapId: 'DEMO_MAP_ID' cho mục đích kiểm thử nếu bạn chưa có mã bản đồ ID.

Thêm thư viện Điểm đánh dấu nâng cao

Phương thức bạn dùng để tải thư viện phụ thuộc vào cách trang web của bạn tải API Maps JavaScript.

  • Nếu trang web của bạn sử dụng tính năng nhập thư viện động, hãy thêm thư viện điểm đánh dấu và nhập AdvancedMarkerElement (và tuỳ chọn PinElement) trong thời gian chạy, như minh hoạ tại đây.

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • Nếu trang web của bạn sử dụng thẻ tải tập lệnh trực tiếp cũ, hãy thêm libraries=marker vào tập lệnh tải, như minh hoạ trong đoạn mã sau.

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

Tìm hiểu thêm về cách tải API Maps JavaScript

Ví dụ

Các ví dụ về mã sau đây cho thấy mã để thêm điểm đánh dấu cũ, tiếp theo là mã cho cùng một ví dụ bằng cách sử dụng điểm đánh dấu nâng cao:

Trước khi di chuyển

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

Sau khi di chuyển

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"),  {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
});

// The advanced marker, positioned at Uluru
const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

Khám phá các tính năng nâng cao của điểm đánh dấu

Bạn có thể tuỳ chỉnh điểm đánh dấu nâng cao theo những cách mà trước đây không thể thực hiện. Giờ đây, bạn có thể điều chỉnh kích thước (tỷ lệ) của điểm đánh dấu và thay đổi màu nền, đường viền và ký tự tượng hình. Hình ảnh đồ hoạ tuỳ chỉnh dễ sử dụng hơn và giờ đây, bạn có thể tạo điểm đánh dấu tuỳ chỉnh bằng HTML và CSS. Tìm hiểu thêm về mọi việc bạn có thể làm với điểm đánh dấu nâng cao: