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

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

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

จัดรูปแบบโพลีไลน์

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

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

2. กำหนดรูปแบบเส้นหลายส่วนของเส้นทางตามข้อมูล: ระบุฟังก์ชันการปรับแต่ง ตามข้อมูลจากการติดตามกองยานพาหนะหรือจากแหล่งที่มาภายนอก

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

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

   ดูตัวอย่างได้ที่กำหนดรูปแบบเส้นหลายส่วนตามข้อมูล

3. ควบคุมระดับการมองเห็นของเส้นหลายเหลี่ยมของเส้นทาง: คุณสามารถซ่อนหรือแสดง เส้นหลายเหลี่ยมได้โดยใช้พร็อพเพอร์ตี้ visible โปรดดูรายละเอียดที่หัวข้อควบคุมระดับการมองเห็นของเส้นหลายส่วนในคู่มือนี้

4. แสดงข้อมูลเพิ่มเติมสำหรับเครื่องหมายยานพาหนะหรือสถานที่ คุณสามารถแสดงข้อมูลเพิ่มเติมได้โดยใช้พร็อพเพอร์ตี้ infowindow ดูรายละเอียดได้ที่แสดงข้อมูลเพิ่มเติมสำหรับเครื่องหมายยานพาหนะหรือตำแหน่งใน คู่มือนี้

ตัวเลือกการปรับแต่งโพลีไลน์

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

• เส้นทางที่เดินทางแล้ว: ใช้การอ้างอิง takenPolylineCustomization - การเดินทางแบบออนดีมานด์ งานที่กำหนดเวลาไว้

• เส้นทางที่เดินทางอยู่: ใช้การอ้างอิงactivePolylineCustomization - การเดินทางแบบออนดีมานด์ งานที่กำหนดเวลาไว้

• เส้นทางที่ยังไม่ได้เดินทาง: ใช้การอ้างอิงremainingPolylineCustomization - การเดินทางแบบออนดีมานด์ งานที่กำหนดเวลาไว้

จัดรูปแบบเส้นหลายเส้นของเส้นทางตามประเภท

หากต้องการจัดรูปแบบเส้นหลายเส้นของเส้นทางตามประเภท ให้เปลี่ยนการจัดรูปแบบของออบเจ็กต์ Polyline โดยใช้ PolylineOptions

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

ตัวอย่างสำหรับทั้งการเดินทางแบบออนดีมานด์หรืองานที่กำหนดเวลาไว้

JavaScript

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

TypeScript

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

จัดรูปแบบเส้นหลายเส้นของเส้นทางโดยใช้ข้อมูล

หากต้องการจัดรูปแบบเส้นหลายเส้นของเส้นทางโดยใช้ข้อมูล ให้เปลี่ยนการจัดรูปแบบของออบเจ็กต์ Polyline โดยใช้ฟังก์ชันการปรับแต่ง

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

ตัวอย่างการเดินทางตามคำขอ

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[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'});
      }
    }
  };

ตัวอย่างงานที่กำหนดเวลาไว้

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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'});
      }
    }
  };

ตัวอย่างการจัดรูปแบบที่คำนึงถึงการจราจร (การเดินทางแบบออนดีมานด์เท่านั้น)

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

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

ควบคุมระดับการมองเห็นของเส้นหลายเส้น

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

ตัวอย่างสำหรับทั้งการเดินทางแบบออนดีมานด์หรืองานที่กำหนดเวลาไว้

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

แสดงหน้าต่างข้อมูลสำหรับเครื่องหมายยานพาหนะหรือตำแหน่ง

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

ตัวอย่างต่อไปนี้แสดงวิธีสร้าง InfoWindow และแนบกับเครื่องหมายยานพาหนะ

ตัวอย่างการเดินทางตามคำขอ

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

ตัวอย่างงานที่กำหนดเวลาไว้

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

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

• จัดรูปแบบแผนที่
• ปรับแต่งเครื่องหมาย