CapDriveMap
Menampilkan peta, lokasi, dan rute dalam meteran. Pusat kamera, orientasi, zoom, dan gaya peta dapat diatur, menggunakan path untuk menyediakan titik rute; mengikuti lokasi pengguna memerlukan data posisi yang valid.
Contoh
function main() {
return (
<Map
center="userLocation"
heading="northUp"
mapStyle="standard"
appearance="automatic"
showUserLocation={true}
cameraAnimation={true}
regionOffset={{ x: 0, y: 20 }}
/>
);
}
Penggunaan
- center mengatur kamera; path memberi rute terpisah. Pusat tidak membuat rute; null memisahkan segmen. cameraAnimation untuk kamera. Warna rute hanya Color, bukan gradasi. Periksa lokasi atau tentukan koordinat.
- x/y dan transform diterapkan setelah layout. Memindah anak tidak mendorong saudara; gunakan spacing atau Spacer. Rotasi dan skala memengaruhi seluruh gambar.
Properti
center?"userLocation" | "dataLocation" | MapCoordinatePusat kamera: lokasi native, lokasi instrumen saat ini, atau koordinat tetap. Defaultnya userLocation.
"userLocation"showUserLocation?booleanTampilkan penanda lokasi pengguna bawaan bila lokasi tersedia.
truepath?ReadonlyArray<MapCoordinate | null>Koordinat rute berurutan. Null memisahkan segmen. Menggunakan lintang/bujur; array kosong tidak menggambar rute.
[]pathStyle?MapPathStyleGaya rute native: Color, lebar, ujung, sambungan, garis putus, tepi, dan penanda ujung opsional. Gradien tidak didukung.
{stroke: $env.accent, lineWidth: 4, outlineStroke: $env.foreground, outlineWidth: 1}heading?"northUp" | "vehicle" | "path" | numberArah kamera: northUp, vehicle, path, atau derajat modulo 360. Arah jalur mengikuti batas segmen.
"northUp"regionOffset?ViewPointOffset tampilan dalam poin layar. x/y positif menggeser area ke kanan/bawah dan isi peta ke kiri/atas.
{x: 0, y: 0}pitch?numberKemiringan kamera dalam derajat; 0 melihat lurus ke bawah.
0mapStyle?"standard" | "satellite" | "hybrid"standard jalan, satellite citra, hybrid citra dengan label.
"standard"appearance?"automatic" | "light" | "dark"automatic mengikuti lingkungan; light/dark menetapkan tampilan peta.
"automatic"cameraAnimation?booleanAnimasikan perubahan kamera native. Aktif secara default, kecuali bingkai pertama dan Kurangi Gerakan.
trueProperti umum
width?number | "auto" | "fill"Lebar dalam poin, ukuran otomatis, atau memenuhi induk.
"fill"height?number | "auto" | "fill"Tinggi dalam poin, ukuran otomatis, atau memenuhi induk.
"fill"x?numberOffset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.
0y?numberOffset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.
0transform?ViewTransformTransformasi seluruh View tanpa mengubah tata letak. Translasi dalam poin, rotasi/kemiringan dalam derajat, skala 1 tetap, jangkar 0–1.
{rotation: 0}opacity?numberOpasitas seluruh View: 0 transparan, 1 buram.
1cornerRadius?numberRadius sudut dalam poin.
0clipped?booleanPotong gambar yang melewati batas View.
falseclip?"rectangle" | "ellipse"Bentuk potongan rectangle atau ellipse; Material juga menerima false untuk mematikan.
"rectangle"zIndex?numberUrutan gambar antar saudara; nilai lebih besar di depan.
0animations?MapAnimation[]Animasi perubahan properti. duration/delay dalam detik; from/to adalah ujung; repeat/autoreverse untuk pengulangan, wrap untuk periode.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberIdentitas stabil di antara elemen sejajar.
Contoh praktis
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,
}}
/>
);
}
Animasi
widthheightxyopacitycornerRadiustransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYregionOffset.xregionOffset.ypathStyle.lineWidthpathStyle.outlineWidthpathStyle.dashPhasepathStyle.strokepathStyle.outlineStrokeJika dihilangkan
Tabel menunjukkan perilaku penghilangan yang diverifikasi dari implementasi; contoh bukan default. Untuk hasil tetap beri nilai eksplisit; ukuran dan warna kontekstual bukan konstanta.
| Properti | Jika dihilangkan |
|---|---|
center | "userLocation" |
heading | "northUp" |
cameraAnimation | true |
mapStyle | "standard" |
appearance | "automatic" |
showUserLocation | true |
pitch | 0 |