Bu sayfada, Gelişmiş İşaretçilerin aşağıdaki özelliklerini nasıl kontrol edeceğiniz gösterilmektedir:
- Bir işaretçi için çakışma davranışını ayarlama
- İşaretçi yüksekliğini belirleyin
- İşaretçi görünürlüğünü harita yakınlaştırma düzeyine göre denetleyin
Bir işaretçi için çakışma davranışını ayarlama
Çarpışma davranışı, bir işaretçi başka bir işaretçiyle çakıştığında (çakıştığında) nasıl görüntüleneceğini kontrol eder. Çarpışma davranışı yalnızca vektör haritalarında desteklenir.
Çakışma davranışını ayarlamak için AdvancedMarkerElement.collisionBehavior
öğesini aşağıdakilerden birine ayarlayın:
REQUIRED
: (varsayılan) Çarpışma fark etmeksizin işaretçiyi her zaman görüntüle.OPTIONAL_AND_HIDES_LOWER_PRIORITY
İşaretçiyi yalnızca diğer işaretçilerle çakışmıyorsa görüntüleyin. Bu türden iki işaretçi çakışırsazIndex
değeri daha yüksek olan işaretçi gösterilir. Bunlar aynızIndex
değerine sahipse dikey ekran konumu daha düşük olan ekran gösterilir.REQUIRED_AND_HIDES_OPTIONAL
Çarpışma fark etmeksizin işaretçiyi her zaman görüntüleyin ve işaretleyiciyle çakışan tümOPTIONAL_AND_HIDES_LOWER_PRIORITY
işaretçilerini veya etiketleri gizleyin.
Aşağıdaki örnekte, bir işaretçi için çakışma davranışı ayarlama gösterilmektedir:
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, });
İşaretçi yüksekliğini belirleyin
Vektör haritalarında, bir işaretçinin göründüğü rakımı ayarlayabilirsiniz. Bu, işaretçilerin 3D harita içeriğiyle ilişkili olarak doğru şekilde görünmesini sağlamak için yararlıdır. Bir işaretçinin rakımını ayarlamak için MarkerView.position
seçeneğinin değeri olarak bir LatLngAltitude
belirtin:
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 }, });
İşaretçi görünürlüğünü harita yakınlaştırma düzeyine göre denetleyin
İşaretçilerin görünürlüğündeki değişikliği görün (uzaklaştırmadan başlayın):
Bir Gelişmiş İşaretçinin görünürlüğünü kontrol etmek için bir zoom_changed
işleyici oluşturun ve yakınlaştırma, aşağıdaki örnekte gösterildiği gibi belirtilen düzeyi aşıyorsa AdvancedMarkerElement.map
öğesini null
olarak ayarlamak için koşullu işlev ekleyin:
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; } });