CapDriveMap
Metre içindeki haritaları, konumları ve rotaları görüntüleyin. Rota noktaları sağlamak için path kullanılarak kamera merkezi, yönlendirme, yakınlaştırma ve harita stili ayarlanabilir; kullanıcının konumunu takip etmek geçerli konumlandırma verileri gerektirir.
Örnek
function main() {
return (
<Map
center="userLocation"
heading="northUp"
mapStyle="standard"
appearance="automatic"
showUserLocation={true}
cameraAnimation={true}
regionOffset={{ x: 0, y: 20 }}
/>
);
}
Kullanım
- center kamerayı, path ayrı rotayı belirler. Merkez rota üretmez; null bölümleri ayırır. cameraAnimation kamera içindir. Rota Color alır, gradyan almaz. Konumu kontrol edin veya sabit koordinat verin.
- x/y ve transform yerleşimden sonra uygulanır. Çocuğu taşımak kardeşleri itmez; aralık için spacing veya Spacer kullanın. Dönüş ve ölçek tüm çizimi etkiler.
Özellikler
center?"userLocation" | "dataLocation" | MapCoordinateKamera merkezi: yerel konum, göstergenin güncel konumu veya sabit koordinatlar. Varsayılan userLocation.
"userLocation"showUserLocation?booleanKonum varsa yerel kullanıcı konumu işaretini gösterir.
truepath?ReadonlyArray<MapCoordinate | null>Sıralı rota koordinatları. Null segmentleri ayırır. Enlem/boylam kullanılır; boş dizi rota çizmez.
[]pathStyle?MapPathStyleYerel rota stili: Color, kalınlık, uç, birleşim, kesik çizgi, dış çizgi ve isteğe bağlı uç işaretleri. Gradyan desteklenmez.
{stroke: $env.accent, lineWidth: 4, outlineStroke: $env.foreground, outlineWidth: 1}heading?"northUp" | "vehicle" | "path" | numberKamera yönü: northUp, vehicle, path veya 360 modunda derece. Yol yönü segment kesintilerine uyar.
"northUp"regionOffset?ViewPointEkran puanı cinsinden görünüm kayması. Pozitif x/y alanı sağa/aşağı, harita içeriğini sola/yukarı taşır.
{x: 0, y: 0}pitch?numberKamera eğimi, derece; 0 dikey aşağı bakar.
0mapStyle?"standard" | "satellite" | "hybrid"standard yollar, satellite uydu, hybrid uydu ve etiketler.
"standard"appearance?"automatic" | "light" | "dark"automatic ortamı izler; light/dark harita görünümünü sabitler.
"automatic"cameraAnimation?booleanYerel kamera değişikliklerini canlandır. İlk kare ve Hareketi Azalt dışında varsayılan olarak açıktır.
trueOrtak özellikler
width?number | "auto" | "fill"Punto cinsinden genişlik, otomatik boyut veya üst alanı doldurma.
"fill"height?number | "auto" | "fill"Punto cinsinden yükseklik, otomatik boyut veya üst alanı doldurma.
"fill"x?numberGörsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.
0y?numberGörsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.
0transform?ViewTransformYerleşimi değiştirmeyen bütünsel dönüşüm. Kaydırma punto, dönüş/eğim derece, ölçek 1 değişmez, dayanak 0–1.
{rotation: 0}opacity?numberTüm View opaklığı: 0 saydam, 1 opak.
1cornerRadius?numberKöşe yarıçapı, punto.
0clipped?booleanView sınırlarını aşan çizimi kırpar.
falseclip?"rectangle" | "ellipse"Kırpma şekli rectangle veya ellipse; Material için false kapatır.
"rectangle"zIndex?numberKardeşler arasında çizim sırası; büyük değer öndedir.
0animations?MapAnimation[]Özellik değişimini canlandırır. duration/delay saniye; from/to uçlar; repeat/autoreverse tekrar, wrap dönem.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberKardeş öğeler arasında kararlı kimlik.
Pratik örnek
function main() {
return (
<Map
width={260}
height={180}
center={{ latitude: 31.2304, longitude: 121.4737 }}
heading="northUp"
showUserLocation={false}
cameraAnimation={false}
path={[
{ latitude: 31.2304, longitude: 121.4737 },
{ latitude: 31.232, longitude: 121.476 },
null,
{ latitude: 31.235, longitude: 121.48 },
{ latitude: 31.237, longitude: 121.482 },
]}
pathStyle={{
stroke: $env.accent,
lineWidth: 4,
outlineStroke: 'white',
outlineWidth: 1,
showEndpoints: true,
}}
/>
);
}
Animasyon
widthheightxyopacitycornerRadiustransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYregionOffset.xregionOffset.ypathStyle.lineWidthpathStyle.outlineWidthpathStyle.dashPhasepathStyle.strokepathStyle.outlineStrokeAtlandığında
Tablo uygulamada doğrulanmış atlama davranışıdır; örnekler varsayılan değildir. Sabit sonuç için açık değer kullanın; bağlama bağlı boyut ve tema renkleri sabit sayı değildir.
| Özellikler | Atlandığında |
|---|---|
center | "userLocation" |
heading | "northUp" |
cameraAnimation | true |
mapStyle | "standard" |
appearance | "automatic" |
showUserLocation | true |
pitch | 0 |