Temel işaretçi özelleştirmesi

3D Haritalar için Markers API, işaretçileri tanımlamak üzere iki sınıf kullanır: 3DMarkerElement sınıfı temel parametreleri (position, label ve map) sağlar, PinElement sınıfı ise daha fazla özelleştirme seçeneği içerir.

Haritaya işaretçi eklemek için önce 3DMarkerElement ve PinElement sınıflarını sağlayan işaretçi kitaplığını yüklemeniz gerekir.

Aşağıdaki snippet'te yeni bir PinElement oluşturup bunu bir işaretçiye uygulama kodu gösterilmektedir:

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

HTML kullanılarak oluşturulan haritalarda, işaretçiyle ilgili temel parametreler gmp-marker-3d HTML öğesi kullanılarak tanımlanır. PinElement sınıfını kullanan tüm özelleştirmeler programatik olarak uygulanmalıdır. Bunu yapmak için kodunuzun HTML sayfasındaki gmp-marker-3d öğelerini alması gerekir. Aşağıdaki snippet'te, bir gmp-marker-3d öğeleri koleksiyonu için sorgu oluşturup sonuçları yineleyerek gmp-marker-3d'de belirtilen özelleştirmeyi uygulayan kod gösterilmektedir.

// Return an array of markers.
const markers = [...document.querySelectorAll('gmp-marker-3d')];

// Loop through the markers
for (let i = 0; i < markers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  markers[i].appendChild(pin.element);
}

Bu sayfada, işaretçileri aşağıdaki şekillerde nasıl özelleştireceğiniz gösterilmektedir:

İşaretçiyi ölçeklendirme

Bir işaretçiyi ölçeklendirmek için scale seçeneğini kullanın:

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

Arka plan rengini değiştirme

Bir işaretçinin arka plan rengini değiştirmek için PinElement.background seçeneğini kullanın:

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);

Kenarlık rengini değiştirme

Bir işaretçinin kenarlık rengini değiştirmek için PinElement.borderColor seçeneğini kullanın:

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);

Glif rengini değiştirme

İşaretçinin glif rengini değiştirmek için PinElement.glyphColor seçeneğini kullanın:

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerWithGlyphColor = new Marker3DElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerWithGlyphColor.append(pinGlyph);

Glife metin ekleme

Varsayılan glifi bir metin karakteriyle değiştirmek için PinElement.glyph seçeneğini kullanın. PinElement metin glifi, PinElement ile ölçeklenir ve varsayılan rengi, PinElement'in varsayılan glyphColor ile eşleşir:

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);

Yüksekliği değiştirme

Marker3DElement.position.altitude seçeneğini Marker3DElement.altitudeMode ve Marker3DElement.extruded ile birlikte kullanarak işaretçinin yüksekliğini değiştirebilir ve yer ile işaretçi arasına ekstrüde edilmiş bir çizgi ekleyebilirsiniz:

// Change a marker's altitude and add an extrusion.
const extrudedMarker = new Marker3DElement({
    position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
    altitudeMode: 'RELATIVE_TO_GROUND',
    extruded: true,
});

İşaretçileri kaldırma

İşaretçileri haritadan kaldırmak için Marker3DElement.remove() simgesini kullanın:

const marker = document.querySelector('gmp-marker-3d');
marker.remove();

Sonraki adımlar