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

เลือกแพลตฟอร์ม: 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};