Kiểm soát hành vi va chạm, độ cao và tầm nhìn

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

Trang này cho bạn biết cách kiểm soát các khía cạnh sau của Điểm đánh dấu nâng cao:

  • Thiết lập trạng thái va chạm cho một điểm đánh dấu
  • Đặt độ cao của điểm đánh dấu
  • Kiểm soát chế độ hiển thị điểm đánh dấu theo mức thu phóng bản đồ

Thiết lập trạng thái va chạm cho một điểm đánh dấu

Chế độ va chạm kiểm soát cách điểm đánh dấu hiển thị nếu va chạm (trùng lặp) bằng một điểm đánh dấu khác. Hành vi va chạm chỉ được hỗ trợ trên bản đồ vectơ.

Để thiết lập hành vi xung đột, hãy đặt AdvancedMarkerElement.collisionBehavior thành một trong như sau:

  • REQUIRED: (mặc định) Luôn hiển thị điểm đánh dấu bất kể xung đột.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY Chỉ hiển thị điểm đánh dấu nếu nó không hiển thị trùng với các điểm đánh dấu khác. Nếu hai điểm đánh dấu loại này trùng nhau, một điểm đánh dấu có zIndex cao hơn sẽ xuất hiện. Nếu chúng có cùng zIndex, thì URL có cùng một zIndex vị trí màn hình dọc phía dưới sẽ được hiển thị.
  • REQUIRED_AND_HIDES_OPTIONAL Luôn hiển thị điểm đánh dấu bất kể xung đột và ẩn mọi điểm đánh dấu hoặc nhãn OPTIONAL_AND_HIDES_LOWER_PRIORITY sẽ chồng chéo với điểm đánh dấu.

Ví dụ sau đây minh hoạ việc thiết lập hành vi xung đột cho một điểm đánh dấu:

TypeScript

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts

JavaScript

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});

index.js

Đặt độ cao của điểm đánh dấu

Trên bản đồ vectơ, bạn có thể đặt cao độ mà tại đó điểm đánh dấu xuất hiện. Đây là rất hữu ích trong việc làm cho các điểm đánh dấu hiển thị chính xác trong mối quan hệ với nội dung bản đồ 3D. Để đặt cao độ của một điểm đánh dấu, hãy chỉ định LatLngAltitude làm giá trị cho Lựa chọn MarkerView.position:

TypeScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});
index.ts

JavaScript

const pin = new PinElement({
  background: "#4b2e83",
  borderColor: "#b7a57a",
  glyphColor: "#b7a57a",
  scale: 2.0,
});
const markerView = new AdvancedMarkerElement({
  map,
  content: pin.element,
  // Set altitude to 20 meters above the ground.
  position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});
index.js

Kiểm soát chế độ hiển thị điểm đánh dấu theo mức thu phóng bản đồ

Xem các điểm đánh dấu thay đổi chế độ hiển thị (bắt đầu bằng cách thu nhỏ):

Để kiểm soát chế độ hiển thị của Điểm đánh dấu nâng cao, hãy tạo một zoom_changed trình nghe và thêm một hàm có điều kiện để đặt AdvancedMarkerElement.map thành null nếu mức thu phóng vượt quá mức đã chỉ định, như trong phần sau ví dụ:

TypeScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.ts

JavaScript

map.addListener("zoom_changed", () => {
  const zoom = map.getZoom();

  if (zoom) {
    // Only show each marker above a certain zoom level.
    marker01.map = zoom > 14 ? map : null;
    marker02.map = zoom > 15 ? map : null;
    marker03.map = zoom > 16 ? map : null;
    marker04.map = zoom > 17 ? map : null;
  }
});
index.js

Các bước tiếp theo

Làm cho điểm đánh dấu có thể nhấp vào và dễ tiếp cận