ดูกลุ่มอุปกรณ์

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

เอกสารนี้จะกล่าวถึงสิ่งต่างๆ ต่อไปนี้ที่คุณสามารถทำได้เมื่อดู กลุ่ม:

1. เริ่มติดตามกลุ่มอุปกรณ์
2. ฟังเหตุการณ์และจัดการข้อผิดพลาด
3. หยุดการติดตาม
4. ติดตามยานพาหนะ 1 คันขณะดูยานพาหนะ

เริ่มติดตามกลุ่มอุปกรณ์

หากต้องการติดตามกลุ่มอุปกรณ์ คุณจะต้องสร้างอินสแตนซ์ผู้ให้บริการตำแหน่งและ ตั้งค่าข้อจำกัดด้านตำแหน่งสำหรับวิวพอร์ตแผนที่ตามที่อธิบายไว้ใน

สร้างอินสแตนซ์ผู้ให้บริการตำแหน่งยานพาหนะ

ไลบรารีการติดตามกลุ่มอุปกรณ์ JavaScript มีผู้ให้บริการตำแหน่งที่ ดึงข้อมูลยานพาหนะหลายคันจาก Fleet Engine

หากต้องการสร้างอินสแตนซ์ ให้ทำตามขั้นตอนต่อไปนี้

1. ใช้รหัสโปรเจ็กต์รวมถึงการอ้างอิงตัวดึงข้อมูลโทเค็น

2. ใช้คำค้นหาตัวกรองยานพาหนะ คำค้นหาตัวกรองยานพาหนะจะควบคุมว่า เพื่อให้แผนที่แสดง ตัวกรองจะส่งไปยัง Fleet Engine

   • สำหรับบริการแบบออนดีมานด์ ให้ใช้ vehicleFilter และตรวจสอบ ListVehiclesRequest.filter
   • สําหรับงานที่กำหนดเวลาไว้ ให้ใช้ deliveryVehicleFilter และตรวจสอบ ListDeliveryVehiclesRequest.filter

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

4. เริ่มต้นมุมมองแผนที่

ตัวอย่างต่อไปนี้แสดงวิธีสร้างอินสแตนซ์ผู้ให้บริการตำแหน่งยานพาหนะสำหรับ ทั้งในกรณีที่เป็นงาน แบบออนดีมานด์และตามกำหนดการ ตัวอย่างเหล่านี้ยังแสดงวิธีใช้ locationRestriction ในเครื่องมือสร้างเพื่อทำให้ผู้ให้บริการตำแหน่ง ใช้งานอยู่

การเดินทางแบบออนดีมานด์

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

งานที่กำหนดเวลาไว้

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

หากต้องการตั้งค่า locationRestriction หลังเครื่องมือสร้าง ให้เพิ่มพารามิเตอร์ locationProvider.locationRestriction ในโค้ดของคุณในภายหลังเป็น ที่แสดงในตัวอย่าง JavaScript ต่อไปนี้

หมายเหตุ: ตัวอย่างนี้ใช้สำหรับงานที่กำหนดเวลาไว้ แต่ใช้สำหรับการเดินทางแบบออนดีมานด์ ที่คุณแค่จะใช้ google.maps.journeySharing.FleetEngineFleetLocationProvider แทน

   // You can choose to not set locationRestriction in the constructor.
   // In this case, the location provider *DOES NOT START* after this line, because
   // no locationRestriction is set.
   locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
   ... // not setting locationRestriction here
   });

   // You can then set the locationRestriction *after* the constructor.
   // After this line, the location provider is active.
   locationProvider.locationRestriction = {
     north: 1,
     east: 2,
     south: 0,
     west: 1,
   };

ตั้งค่าการจำกัดตำแหน่งโดยใช้วิวพอร์ตของแผนที่

คุณยังสามารถกำหนดขอบเขตของ locationRestriction ให้ตรงกับพื้นที่ปัจจุบันได้อีกด้วย ซึ่งมองเห็นได้ในมุมมองแผนที่

การเดินทางแบบออนดีมานด์

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

งานที่กำหนดเวลาไว้

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

เริ่มต้นมุมมองแผนที่

เมื่อคุณสร้างผู้ให้บริการตำแหน่งแล้ว ให้เริ่มต้นมุมมองแผนที่ แบบเดียวกับที่คุณทำเมื่อติดตามยานพาหนะ 1 คัน

หลังจากโหลดไลบรารีการแชร์เส้นทาง JavaScript แล้ว ให้เริ่มต้น มุมมองแผนที่และเพิ่มลงในหน้า HTML หน้าเว็บของคุณควรมี องค์ประกอบ <div> ที่เก็บมุมมองแผนที่ องค์ประกอบ <div> มีชื่อว่า map_canvas ในตัวอย่างต่อไปนี้=

การเดินทางแบบออนดีมานด์

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
                        = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

งานที่กำหนดเวลาไว้

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

คอยฟังเหตุการณ์และจัดการกับข้อผิดพลาด

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

ฟังเหตุการณ์การเปลี่ยนแปลง

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

โปรดดูรายละเอียดต่อไปนี้

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

ตัวอย่างต่อไปนี้แสดงวิธีฟังเหตุการณ์การเปลี่ยนแปลงเหล่านี้

การเดินทางแบบออนดีมานด์

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  for (vehicle of e.vehicles) {
    console.log(vehicle.navigationStatus);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

งานที่กำหนดเวลาไว้

JavaScript

locationProvider.addListener('update', e => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

ฟังข้อผิดพลาด

นอกจากนี้ คุณยังควรรับฟังและจัดการกับข้อผิดพลาดที่เกิดขึ้นขณะ ยานพาหนะ ข้อผิดพลาดที่เกิดขึ้นไม่พร้อมกันจากการขอพาหนะ ข้อมูลที่ทำให้เกิดเหตุการณ์ข้อผิดพลาด

ตัวอย่างต่อไปนี้แสดงวิธีฟัง เหตุการณ์เหล่านี้เพื่อให้คุณจัดการกับข้อผิดพลาดได้

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

หยุดติดตามกลุ่มอุปกรณ์

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

ตั้งค่าขอบเขตผู้ให้บริการตำแหน่งเป็นค่าว่าง

หากต้องการหยุดไม่ให้ผู้ให้บริการตำแหน่งติดตามกลุ่มอุปกรณ์ ให้ตั้งค่าขอบเขต ของผู้ให้บริการตำแหน่งเป็นค่าว่าง

การเดินทางแบบออนดีมานด์

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

งานที่กำหนดเวลาไว้

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

นำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่

ตัวอย่างต่อไปนี้แสดงวิธีนำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

ติดตามรถส่งของขณะดูกลุ่มรถส่งของ

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

JavaScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

TypeScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

ใช้การปรับแต่งเครื่องหมายเพื่อติดตามยานพาหนะที่นำส่งสินค้า

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

1. ปรับแต่งเครื่องหมายและเพิ่มการดำเนินการคลิก

2. ซ่อนเครื่องหมายเพื่อป้องกันไม่ให้มีเครื่องหมายซ้ำกัน

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

ตัวอย่างขั้นตอนเหล่านี้มีอยู่ในส่วนต่อไปนี้

ปรับแต่งเครื่องหมายและเพิ่มการดำเนินการคลิก

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

ซ่อนเครื่องหมายเพื่อป้องกันไม่ให้มีเครื่องหมายซ้ำกัน

ซ่อนเครื่องหมายจากผู้ให้บริการตำแหน่งยานพาหนะที่นำส่งเพื่อป้องกันไม่ให้มีการแสดงผล เครื่องหมาย 2 เครื่องหมายสำหรับรถคันเดียวกัน

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

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

• จัดรูปแบบแผนที่