Kiểm soát hành vi va chạm, độ cao và khả năng hiển thị

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

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

  • Đặt trạng thái va chạm cho đ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 đồ

Đặt trạng thái va chạm cho điểm đánh dấu

Trạng thái va chạm kiểm soát cách một điểm đánh dấu sẽ hiển thị nếu điểm đánh dấu đó va chạm (chồng chéo) với một điểm đánh dấu khác. Trạng thái va chạm chỉ được hỗ trợ trên bản đồ vectơ.

Để đặt trạng thái va chạm, hãy đặt AdvancedMarkerElement.collisionBehavior thành một trong những giá trị sau:

  • REQUIRED: (mặc định) Luôn hiển thị điểm đánh dấu bất kể có bị trùng lặp hay không.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY Chỉ hiển thị điểm đánh dấu nếu điểm đánh dấu đó không trùng lặp với các điểm đánh dấu khác. Nếu hai điểm đánh dấu thuộc loại này trùng nhau, thì điểm đánh dấu có zIndex cao hơn sẽ xuất hiện. Nếu các thành phần có cùng zIndex, thì thành phần có vị trí màn hình dọc thấp hơn sẽ xuất hiện.
  • REQUIRED_AND_HIDES_OPTIONAL Luôn hiển thị điểm đánh dấu bất kể có xung đột hay không, đồng thời ẩ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ạ cách đặt trạng thái va chạm cho một điểm đánh dấu:

TypeScript

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

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

Trên bản đồ vectơ, bạn có thể đặt độ cao mà điểm đánh dấu xuất hiện. Điều này rất hữu ích để giúp điểm đánh dấu xuất hiện chính xác so với nội dung bản đồ 3D. Để đặt độ cao cho điểm đánh dấu, hãy chỉ định LatLngAltitude làm giá trị cho tuỳ chọn MarkerView.position:

TypeScript

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

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);

JavaScript

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

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);

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

Xem sự thay đổi về chế độ hiển thị của điểm đánh dấu (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 trình nghe zoom_changed 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 ví dụ sau:

TypeScript

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom! > minZoom ? position : null;
    }
});

JavaScript

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});

Các bước tiếp theo

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