ปรับแต่งเส้นประกอบเส้นทาง

เลือกแพลตฟอร์ม Android iOS JavaScript

เอกสารนี้ครอบคลุมถึงวิธีปรับแต่งโพลีไลน์ของเส้นทางสำหรับแผนที่ที่คุณใช้ใน แอปติดตามเส้นทางบนเว็บสำหรับผู้ใช้ที่เป็นผู้บริโภค

คุณสามารถใช้ SDK ของผู้บริโภคในการควบคุมเส้นทางการมองเห็นโพลีไลน์หรือจัดรูปแบบ เส้นทางโพลีไลน์สำหรับเส้นทางของการเดินทางบนแผนที่ SDK สร้าง ออบเจ็กต์ google.maps.Polyline สำหรับพิกัดแต่ละคู่ในการเดินทาง เส้นทางที่ใช้งานอยู่หรือที่เหลืออยู่ จากนั้นไลบรารีจะใช้การปรับแต่งเหล่านี้ใน 2 สถานการณ์ ได้แก่

  • ก่อนเพิ่มวัตถุลงในแผนที่
  • เมื่อข้อมูลที่ใช้สำหรับออบเจ็กต์เปลี่ยนไป

จัดรูปแบบเส้นประกอบของเส้นทาง

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

  • เรียบง่ายที่สุด: ใช้ PolylineOptions เพื่อนำไปใช้กับ ตรงกับ Polyline วัตถุเมื่อสร้างหรืออัปเดต
  • ขั้นสูง: ระบุฟังก์ชันการปรับแต่ง ฟังก์ชันการปรับแต่งทำให้สามารถจัดรูปแบบออบเจ็กต์ตาม ข้อมูลที่ส่งโดย Fleet Engine ฟังก์ชันนี้จะเปลี่ยนการจัดรูปแบบของแต่ละ ตามสถานะปัจจุบันของเส้นทาง เช่น การใส่สี Polyline วัตถุมีเฉดสีที่ลึกขึ้นหรือทำให้หนาขึ้นเมื่อพาหนะ เคลื่อนไหวช้าลง คุณยังเข้าร่วมกับแหล่งข้อมูลภายนอก Fleet Engine ได้ด้วย และจัดรูปแบบออบเจ็กต์ Polyline โดยอิงตามข้อมูลดังกล่าว

พารามิเตอร์การกำหนดค่า

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

ใช้ PolylineOptions

ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบสำหรับออบเจ็กต์ Polyline ด้วย PolylineOptions ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของ ออบเจ็กต์ Polyline ใดก็ตามที่ใช้การปรับแต่งเส้นประกอบใดๆ ที่แสดงอยู่ก่อนหน้านี้

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

ใช้ฟังก์ชันการปรับแต่งเพื่อจัดรูปแบบเส้นประกอบของเส้นทาง

ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบสำหรับเส้นทางที่ใช้งานอยู่ เส้นประกอบ ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของออบเจ็กต์ Polyline โดยใช้พารามิเตอร์การกำหนดค่าเส้นประกอบเส้นทางที่แสดงก่อนหน้านี้

JavaScript

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

ควบคุมการเปิดเผยเส้นประกอบของเส้นทาง

โดยค่าเริ่มต้น ระบบจะแสดงวัตถุทั้งหมด Polyline รายการ วิธีสร้างวัตถุ Polyline ซ่อนตัว ให้ตั้งค่าพร็อพเพอร์ตี้ visible

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};