Kullanıcının dikkatini haritadaki bir konuma çekmek için işaretçiler kullanın. Bu kılavuzda, 3D haritalarda işaretçilerin nasıl kullanılacağı ve özelleştirileceği gösterilmektedir. İşaretçilerin şeklini, boyutunu, rengini ve göründükleri yüksekliği kontrol edebilirsiniz.
Haritalarda konumları göstermek için işaretçileri kullanın. Yukarıdaki örnekte, özelleştirme uygulanmamış temel bir tek işaretçi gösterilmektedir.
Rengi, ölçeği ve simge resmini özelleştirme
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 ayarlama
İşaretçiyi uzatarak ve yüksekliği ayarlayarak işaretçi yüksekliğini belirleyebilirsiniz.
İşaretçilerin tıklama ve klavye etkinliklerine yanıt vermesini sağlama
click event
listener ekleyerek işaretçinin tıklama 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 çarpıştığında nasıl davranması gerektiğini belirtin.
const marker = new Marker3DElement({
position: {lat, lng},
collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});