Temel işaretçi özelleştirmesi

3D işaretçiler, işaretçileri tanımlamak için iki sınıf kullanır: 3DMarkerElement sınıfı temel parametreleri (position, label ve map) sağlar ve PinElement sınıfı 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:

const pinScaled = new PinElement({
  scale: 1.5,
});

const markerWithLabel = new Marker3DElement({
  position: { lat: 37.419, lng: -122.03 },
  label: 'Simple label'
});

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, gmp-marker-3d öğeleri koleksiyonu için sorgu oluşturup sonuçları yineleyerek gmp-marker-3d içinde 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 markerScaled = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
});

markerScaled.appendChild(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 markerBackground = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
});

markerBackground.appendChild(pinBackground);

Kenarlık rengini değiştirme

İş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: "#137333",
});
const markerBorder = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
});

markerBorder.appendChild(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 markerGlyph = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
});

markerGlyph.appendChild(pinGlyph);

Glife metin ekleme

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

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerGlyphText = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
});

markerGlyphText.appendChild(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 zemin ile işaretçi arasına ekstrüde edilmiş bir çizgi ekleyebilirsiniz:

const marker = 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