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 hành vi 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 hành vi va chạm cho một điểm đánh dấu
Hành vi 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 (trùng lặp) với 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 các giá trị 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 đ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 lặp, thì điểm đánh dấu cózIndex
cao hơn sẽ hiển thị. Nếu chúng có cùngzIndex
, thì phiên bả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ể xảy ra xung đột và ẩn mọi điểm đánh dấu hoặc nhãnOPTIONAL_AND_HIDES_LOWER_PRIORITY
chồng chéo với điểm đánh dấu.
Ví dụ sau đây minh hoạ cách 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, });
JavaScript
const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
Đặ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 sẽ xuất hiện. Điều này rất hữu ích trong việc làm cho các điểm đánh dấu xuất hiện chính xác so với nội dung trên bản đồ 3D. Để đặt độ cao cho một đ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 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, });
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 }, });
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 trong 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 một Điểm đánh dấu nâng cao, hãy tạo 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 được chỉ định, như trong ví dụ sau:
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; } });
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; } });