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

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

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

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

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

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

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

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

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

   ตัวอย่างเช่น ดูจัดรูปแบบเส้นประกอบตามข้อมูล

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

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

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

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

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

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

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

จัดรูปแบบโพลีไลน์ของเส้นทางตามประเภท

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

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

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

JavaScript

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

TypeScript

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

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

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

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

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

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