本页面介绍了如何控制高级标记的以下几个方面:
- 设置标记的冲突行为
- 设置标记的海拔高度
- 按地图的缩放级别控制标记的可见性
设置标记的冲突行为
冲突行为用于控制标记与其他标记冲突(重叠)时的显示方式。只有矢量地图支持冲突行为。
如需设置冲突行为,请将 AdvancedMarkerView.collisionBehavior
设置为以下其中一项:
REQUIRED
:(默认)无论冲突如何,一律显示标记。OPTIONAL_AND_HIDES_LOWER_PRIORITY
仅在标记未与其他标记重叠时才显示该标记。如果此类型的两个标记发生重叠,则会显示zIndex
较高的标记。如果它们具有相同的zIndex
,则会显示垂直屏幕位置较低的位置。REQUIRED_AND_HIDES_OPTIONAL
始终显示该标记(不考虑冲突之处),并隐藏与该标记重叠的所有OPTIONAL_AND_HIDES_LOWER_PRIORITY
标记或标签。
以下示例显示了如何为标记设置冲突行为:
TypeScript
const advancedMarker = new google.maps.marker.AdvancedMarkerView({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
JavaScript
const advancedMarker = new google.maps.marker.AdvancedMarkerView({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
设置标记的海拔高度
在矢量地图上,您可以设置标记呈现的海拔高度。为了使标记按照相关 3D 地图内容正确显示,这个功能非常有用。如要为标记设置海拔高度,请将 LatLngAltitude
指定为 MarkerView.position
选项的值:
TypeScript
const pinView = new google.maps.marker.PinView({ background: '#4b2e83', borderColor: '#b7a57a', glyphColor: '#b7a57a', scale: 2.0, }); const markerView = new google.maps.marker.AdvancedMarkerView({ map, content: pinView.element, // Set altitude to 20 meters above the ground. position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral, });
JavaScript
const pinView = new google.maps.marker.PinView({ background: "#4b2e83", borderColor: "#b7a57a", glyphColor: "#b7a57a", scale: 2.0, }); const markerView = new google.maps.marker.AdvancedMarkerView({ map, content: pinView.element, // Set altitude to 20 meters above the ground. position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 }, });
按地图的缩放级别控制标记的可见性
查看标记可见性的变化(先缩小地图):
如需控制高级标记的可见性,请创建一个 zoom_changed
监听器,并添加一个条件函数,以便在缩放量超过指定级别时将 AdvancedMarkerView.map
设置为 null
,如以下示例所示:
TypeScript
map.addListener('zoom_changed', () => { const zoom = map.getZoom(); if (zoom) { // Only show each marker above a certain zoom level. markerView01.map = zoom > 14 ? map : null; markerView02.map = zoom > 15 ? map : null; markerView03.map = zoom > 16 ? map : null; markerView04.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. markerView01.map = zoom > 14 ? map : null; markerView02.map = zoom > 15 ? map : null; markerView03.map = zoom > 16 ? map : null; markerView04.map = zoom > 17 ? map : null; } });