ติดตามยานพาหนะ

ส่วนนี้จะแสดงวิธีใช้ไลบรารีการติดตามกลุ่ม JavaScript เพื่อติดตาม ยานพาหนะสำหรับการเดินทางออนดีมานด์หรืองานที่กำหนดเวลาไว้

หากต้องการติดตามยานพาหนะ ให้ทำตามขั้นตอนต่อไปนี้

  1. โหลดไลบรารีและเริ่มต้นมุมมองแผนที่
  2. ระบุตำแหน่งรถและมุมมองแผนที่
  3. ฟังเหตุการณ์และจัดการข้อผิดพลาด
  4. หยุดการติดตาม

โหลดห้องสมุดและเริ่มต้นมุมมองแผนที่

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

  • แหล่งที่มาของ URL: เรียกใช้ Google Maps API เพื่อขอแผนที่โดยใช้คีย์ API

  • พารามิเตอร์ callback: เรียกใช้ฟังก์ชัน initMap หลังจากที่ API ตอบกลับการเรียก

  • พารามิเตอร์ libraries: โหลดไลบรารีการติดตาม Fleet

  • แอตทริบิวต์ defer: ช่วยให้เบราว์เซอร์แสดงผลส่วนที่เหลือต่อไป ขณะที่ API โหลดอยู่

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
    

ระบุตำแหน่งรถและมุมมองแผนที่

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

สร้างตัวอย่างผู้ให้บริการตำแหน่งรถ

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

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

JavaScript

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

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

TypeScript

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

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

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

JavaScript

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

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

TypeScript

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

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

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

หลังจากโหลดไลบรารีการแชร์เส้นทาง JavaScript แล้ว ให้เริ่มต้น มุมมองแผนที่และเพิ่มลงในหน้า HTML หน้าเว็บของคุณควรมี องค์ประกอบ &lt;div&gt; ที่เก็บมุมมองแผนที่ องค์ประกอบ &lt;div&gt; มีชื่อว่า 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);

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

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

ฟังเหตุการณ์เกี่ยวกับยานพาหนะ

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

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

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

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

JavaScript

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

TypeScript

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

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

JavaScript

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

TypeScript

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

จัดการข้อผิดพลาด

หลังจากโหลดไลบรารีการแชร์เส้นทาง JavaScript แล้ว ให้เริ่มต้น มุมมองแผนที่และเพิ่มลงในหน้า HTML หน้าเว็บของคุณควรมี องค์ประกอบ &lt;div&gt; ที่เก็บมุมมองแผนที่ องค์ประกอบ &lt;div&gt; มีชื่อว่า 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.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

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

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

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