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
- Arka plan rengini değiştirme
- Kenarlık rengini değiştirme
- Glif rengini değiştirme
- Glife metin ekleme
- Yüksekliği değiştirme
- İşaretçileri kaldırma
İş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();