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

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

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

Consumer 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};