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.

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

Aşağıdaki snippet'te, yeni bir PinElement oluşturup bunu bir işaretçiye uygulamak için kullanılacak kod 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çi için 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. Bunun için kodunuzun, HTML sayfasından gmp-marker-3d öğelerini alması gerekir. Aşağıdaki snippet'te, gmp-marker-3d öğelerinin koleksiyonunu sorgulayan ve ardından gmp-marker-3d öğesinde tanımlanan özelleştirmeyi uygulamak için sonuçları iterleyen 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çilerin aşağıdaki şekillerde nasıl özelleştirileceği gösterilmektedir:

İşaretçinin ölçeğini ayarlama

İş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

İş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);

Simge rengini değiştirme

İşaretçinin simge 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);

Bir glife metin ekleme

Varsayılan glifi 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 öğesinin 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);

Rakımı değiştirme

İşaretçinin yüksekliğini değiştirmek ve zemin ile işaretçi arasına bir ekstrüde çizgi eklemek için Marker3DElement.position.altitude seçeneğini Marker3DElement.altitudeMode ve Marker3DElement.extruded ile birlikte kullanın:

const marker = new Marker3DElement({
  position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
  altitudeMode: 'RELATIVE_TO_GROUND',
  extruded: true,
});

İşaretçileri kaldırma

İşaretleri haritada kaldırmak için Marker3DElement.remove() simgesini kullanın:

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

Sonraki adımlar