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

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

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

จัดรูปแบบเส้นประกอบ

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

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

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

   • ข้อมูลจากการติดตามยานพาหนะ: การติดตามยานพาหนะจะส่งข้อมูลเส้นประกอบไปยังฟังก์ชันการปรับแต่ง รวมถึงข้อมูลเกี่ยวกับสถานะปัจจุบันของยานพาหนะ คุณสามารถจัดรูปแบบเส้นประกอบตามข้อมูลนี้ ซึ่งรวมถึงการทำให้สีของ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'});
      }
    }
  };

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

ฟีเจอร์นี้จะแสดงข้อมูลความเร็วของรถบนเส้นทางที่ใช้งานอยู่และเส้นทางที่เหลือสำหรับยานพาหนะที่ติดตาม คุณสามารถใช้ข้อมูลนี้เพื่อจัดสไตล์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();

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

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