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çinin çarpması (çakışması) durumunda nasıl görüntüleneceğini kontrol eder başka bir işaretçi kullanın. Çarpışma davranışı yalnızca vektör haritalarında desteklenir.
Çarpışma davranışı ayarlamak için AdvancedMarkerElement.collisionBehavior
öğesini şunlardan birine ayarlayın:
şu:
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 görünmüyorsa görüntüle başka işaretçilerle çakışıyor. Bu türden iki işaretçi çakışırsa, diğer işaretçilerden en yüksekzIndex
değeri gösterilir. BunlarınzIndex
öğesi aynıysa dikey alt ekran konumu gösteriliyor.REQUIRED_AND_HIDES_OPTIONAL
Şunlardan bağımsız olarak işaretçiyi her zaman görüntüle: çakışmayı ayarlayın ve tümOPTIONAL_AND_HIDES_LOWER_PRIORITY
işaretçilerini veya etiketlerini gizleyin bir reklam öğesi seçin.
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
3D harita içeriğiyle ilişkili olarak işaretçilerin doğru görünmesini sağlamak için yararlı olabilir. To
bir işaretçi için rakım değeri olarak bir LatLngAltitude
belirtin.
MarkerView.position
seçeneği:
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çileri görme görünürlük değişikliği (uzaklaştırmadan başlayın):
Gelişmiş işaretçinin görünürlüğünü kontrol etmek için zoom_changed
oluşturun
işleyiciyi seçin ve AdvancedMarkerElement.map
öğesini
Yakınlaştırma düzeyi, aşağıda gösterildiği gibi belirtilen düzeyi aşarsa null
örnek:
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; } });