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. T4 bạn nên chuyển sang google.maps.marker.AdvancedMarkerElement mới . Điểm đánh dấu nâng cao cung cấp những cải tiến đáng kể so với cũ Lớp google.maps.Marker.

Tìm hiểu thêm về việc ngừng sử dụng này

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

  1. Thêm mã để nhập thư viện điểm đánh dấu. Lưu ý rằng phiên bản trước đó của điểm đánh dấu (google.maps.Marker) không có yêu cầu này.
  2. Thay đổi google.maps.Marker thành google.maps.marker.AdvancedMarkerElement
  3. Thêm mã nhận dạng bản đồ vào mã khởi chạy bản đồ. Ví dụ: mapId: 'DEMO_MAP_ID' cho mục đích thử nghiệm nếu bạn không có bản đồ Đã có giấy tờ tuỳ thân.

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

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

  • Nếu trang web của bạn sử dụng tính năng tải tập lệnh động, hãy thêm thư viện điểm đánh dấu và nhập AdvancedMarkerElement (và PinElement (không bắt buộc)) trong thời gian chạy, dưới dạng hiển thị ở đâ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 đang 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 Maps JavaScript API

Ví dụ

Các ví dụ về mã sau đây hiển thị mã để thêm một điểm đánh dấu cũ, theo sau là mã cho cùng 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

  // 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',
    });

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

Điểm đánh dấu nâng cao có thể được tuỳ chỉnh theo những cách mà trước đây không thể làm được. 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 sắc của nền, đường viền và ký tự. Hình ảnh đồ hoạ tuỳ chỉnh dễ sử dụng hơn, và hiện có thể tạo điểm đánh dấu tuỳ chỉnh bằng cách sử dụng HTML và CSS. Tìm hiểu thêm về mọi thứ bạn có thể làm với điểm đánh dấu nâng cao: