Kullanıcının dikkatini haritadaki bir konuma çekmek için işaretçileri kullanın. Bu kılavuzda, 3D haritalardaki işaretçilerin nasıl kullanılacağı ve özelleştirileceği gösterilmektedir. İşaretçilerin göründükleri rakıma ek olarak şeklini, boyutunu ve rengini de kontrol edebilirsiniz.
Haritalarda konumları göstermek için işaretçileri kullanın. Yukarıdaki örnekte, özelleştirme uygulanmayan, basit ve tek bir işaretçi gösterilmektedir.
Rengi, ölçeği ve simge resmini özelleştirin
Varsayılan işaretçinin arka planını, glifini, kenarlık rengini ve boyutunu özelleştirin.
Varsayılan işaretçi simgesini özel bir SVG kaynağıyla değiştirin.
İşaretçi yüksekliğini belirleyin
İşaretçiyi çekip rakımı ayarlayarak işaretçi rakımını ayarlayabilirsiniz.
İşaretçilerin tıklama ve klavye etkinliklerine yanıt vermesini sağlayın
click etkinlik işleyici ekleyerek bir işaretçinin tıklamalara ve klavye etkinliklerine yanıt vermesini sağlayın.
function initMap() {
const map = new Map3DElement({
center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
tilt: 67.5,
range: 45000,
mode: MapMode.HYBRID
});
const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
map,
position: {lat: 37.4239163, lng: -122.0947209},
});
interactiveMarker.addEventListener('gmp-click', (event) => {
// Handle the click event.
// ...
});
}
İşaretçi çarpışma davranışını ayarlama
Bir işaretçinin başka bir işaretçi veya harita etiketiyle çakıştığında nasıl davranması gerektiğini belirtin.
const marker = new Marker3DElement({
position: {lat, lng},
collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});