CapDrive
คู่มือการใช้งาน

Map

แสดงแผนที่ สถานที่ และเส้นทางภายในมิเตอร์ สามารถตั้งค่าศูนย์กล้อง การวางแนว การซูม และรูปแบบแผนที่ได้ โดยใช้ path เพื่อระบุจุดเส้นทาง การติดตามตำแหน่งของผู้ใช้ต้องใช้ข้อมูลตำแหน่งที่ถูกต้อง

ตัวอย่าง

function main() {
  return (
    <Map
      center="userLocation"
      heading="northUp"
      mapStyle="standard"
      appearance="automatic"
      showUserLocation={true}
      cameraAnimation={true}
      regionOffset={{ x: 0, y: 20 }}
    />
  );
}

การใช้งาน

  • center กำหนดกล้อง path ให้เส้นทางแยกกัน ตั้งศูนย์ไม่สร้างเส้นทาง null แยกช่วง กล้องใช้ cameraAnimation สีเส้นทางเป็น Color ไม่รับ Gradient ตรวจตำแหน่งหรือกำหนดพิกัดเอง
  • x/y และ transform ทำงานหลังจัดพื้นที่ การเลื่อนลูกไม่ผลักตัวข้างเคียง ใช้ spacing หรือ Spacer เปลี่ยนช่องว่าง การหมุนและย่อขยายมีผลกับภาพทั้งหมด

คุณสมบัติ

center?"userLocation" | "dataLocation" | MapCoordinate

ศูนย์กลางกล้อง: ตำแหน่งระบบ ตำแหน่งปัจจุบันของมาตรวัด หรือพิกัดคงที่ ค่าเริ่มต้นคือ userLocation

ตัวอย่าง"userLocation"
showUserLocation?boolean

แสดงหมุดตำแหน่งผู้ใช้แบบระบบเมื่อมีตำแหน่ง

ตัวอย่างtrue
path?ReadonlyArray<MapCoordinate | null>

พิกัดเส้นทางตามลำดับ null ใช้แบ่งช่วง ใช้ละติจูด/ลองจิจูด อาร์เรย์ว่างจะไม่วาดเส้นทาง

ตัวอย่าง[]
pathStyle?MapPathStyle

รูปแบบเส้นทางเนทีฟ: Color ความหนา ปลาย จุดเชื่อม เส้นประ เส้นขอบ และเครื่องหมายเริ่ม/จบ ไม่รองรับไล่สี

ตัวอย่าง{stroke: $env.accent, lineWidth: 4, outlineStroke: $env.foreground, outlineWidth: 1}
heading?"northUp" | "vehicle" | "path" | number

ทิศกล้อง: northUp, vehicle, path หรือองศาโมดูโล 360 ทิศเส้นทางจะไม่ข้ามจุดแบ่งช่วง

ตัวอย่าง"northUp"
regionOffset?ViewPoint

ออฟเซ็ตพื้นที่แสดงเป็นพอยต์ ค่า x/y บวกเลื่อนพื้นที่ไปทางขวา/ล่าง และเนื้อหาแผนที่ไปทางซ้าย/บน

ตัวอย่าง{x: 0, y: 0}
pitch?number

มุมเอียงกล้องเป็นองศา 0 มองลงตรง ๆ

ตัวอย่าง0
mapStyle?"standard" | "satellite" | "hybrid"

standard ถนน satellite ภาพดาวเทียม hybrid ภาพพร้อมป้าย

ตัวอย่าง"standard"
appearance?"automatic" | "light" | "dark"

automatic ตามสภาพแวดล้อม light/dark กำหนดแผนที่สว่างหรือมืด

ตัวอย่าง"automatic"
cameraAnimation?boolean

เคลื่อนไหวการเปลี่ยนกล้องเนทีฟ เปิดโดยค่าเริ่มต้น ยกเว้นเฟรมแรกและโหมดลดการเคลื่อนไหว

ตัวอย่างtrue
คุณสมบัติทั่วไป
width?number | "auto" | "fill"

ความกว้างเป็นพอยต์ ปรับขนาดอัตโนมัติ หรือเติมเต็มพื้นที่แม่

ตัวอย่าง"fill"
height?number | "auto" | "fill"

ความสูงเป็นพอยต์ ปรับขนาดอัตโนมัติ หรือเติมเต็มพื้นที่แม่

ตัวอย่าง"fill"
x?number

เลื่อนภาพเป็นพอยต์: x ไปขวา y ลงล่าง ไม่เปลี่ยนพื้นที่ในเลย์เอาต์

ตัวอย่าง0
y?number

เลื่อนภาพเป็นพอยต์: x ไปขวา y ลงล่าง ไม่เปลี่ยนพื้นที่ในเลย์เอาต์

ตัวอย่าง0
transform?ViewTransform

แปลงทั้ง View โดยไม่เปลี่ยนเลย์เอาต์ ระยะเลื่อนเป็นพอยต์ หมุน/เอียงเป็นองศา สเกล 1 ไม่เปลี่ยน จุดยึด 0–1

ตัวอย่าง{rotation: 0}
opacity?number

ความทึบทั้ง View: 0 โปร่งใส 1 ทึบ

ตัวอย่าง1
cornerRadius?number

รัศมีมุมโค้งเป็นพอยต์

ตัวอย่าง0
clipped?boolean

ตัดส่วนที่วาดเกินขอบ View

ตัวอย่างfalse
clip?"rectangle" | "ellipse"

รูปทรงตัด rectangle หรือ ellipse; Material ใช้ false เพื่อปิดได้

ตัวอย่าง"rectangle"
zIndex?number

ลำดับวาดระหว่างองค์ประกอบระดับเดียวกัน ค่ายิ่งมากยิ่งอยู่หน้า

ตัวอย่าง0
animations?MapAnimation[]

แอนิเมชันเมื่อคุณสมบัติเปลี่ยน duration/delay เป็นวินาที from/to เป็นปลายทาง repeat/autoreverse ควบคุมการซ้ำ wrap เป็นคาบ

ตัวอย่าง[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

ตัวระบุที่คงที่ระหว่างองค์ประกอบระดับเดียวกัน

ตัวอย่างใช้งาน

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,
      }}
    />
  );
}

ภาพเคลื่อนไหว

ภาพเคลื่อนไหว

widthheightxyopacitycornerRadiustransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYregionOffset.xregionOffset.ypathStyle.lineWidthpathStyle.outlineWidthpathStyle.dashPhasepathStyle.strokepathStyle.outlineStroke

เมื่อไม่ระบุ

ตารางคือพฤติกรรมเมื่อไม่ระบุที่ตรวจจากโค้ด ตัวอย่างไม่ใช่ค่าเริ่มต้น หากต้องการผลแน่นอนให้ระบุค่า ขนาดและสีตามบริบทไม่ใช่ค่าคงที่

คุณสมบัติเมื่อไม่ระบุ
center"userLocation"
heading"northUp"
cameraAnimationtrue
mapStyle"standard"
appearance"automatic"
showUserLocationtrue
pitch0

$data · ข้อมูลการขับขี่

ภาพเคลื่อนไหว

Polyline

ก่อนหน้า

Path

ขั้นตอนถัดไป

ในหน้านี้

ตัวอย่างการใช้งานคุณสมบัติตัวอย่างใช้งานภาพเคลื่อนไหวเมื่อไม่ระบุAPI ที่เกี่ยวข้อง