หน้านี้ได้รับการแปลโดย Cloud Translation API

ติดตามการจัดส่ง

ตอนนี้คุณได้ตั้งค่า JavaScript Consumer SDK สำหรับงานที่กำหนดเวลาไว้แล้ว พร้อมที่จะติดตามการจัดส่งด้วยแอปสำหรับผู้บริโภคแล้ว เอกสารนี้ครอบคลุม ขั้นตอนสำคัญต่อไปนี้ในกระบวนการนี้

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

ตั้งค่าแผนที่

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

โหลดแผนที่ใหม่โดยใช้ Google Maps JavaScript API

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

พารามิเตอร์ callback จะเรียกใช้ฟังก์ชัน initMap หลังจากที่ API โหลด
แอตทริบิวต์ defer ช่วยให้เบราว์เซอร์แสดงผลส่วนที่เหลือของหน้าเว็บต่อไปได้ขณะที่ API โหลด

ใช้ฟังก์ชัน initMap เพื่อสร้างอินสแตนซ์ของ Consumer SDK เช่น

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

โหลดแผนที่ที่มีอยู่

นอกจากนี้ คุณยังโหลดแผนที่ที่มีอยู่ซึ่งสร้างโดย Google Maps JavaScript API ได้ด้วย เช่น แผนที่ที่คุณใช้อยู่แล้ว

เช่น สมมติว่าคุณมีหน้าเว็บที่มีเอนทิตี google.maps.Map มาตรฐานซึ่งแสดงเครื่องหมายตามที่กำหนดไว้ในโค้ด HTML ต่อไปนี้ ซึ่งจะแสดงแผนที่โดยใช้initMapฟังก์ชันเดียวกันใน Callback ที่ส่วนท้าย ดังนี้

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
        // Initialize and add the map
        function initMap() {
          // The location of Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
          // The map, initially centered at Mountain View, CA.
          var map = new google.maps.Map(document.getElementById('map'));
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

          // The marker, now positioned at Pier 39
          var marker = new google.maps.Marker({position: pier39, map: map});
        }
        </script>
        <!-- Load the API from the specified URL.
           * The defer attribute allows the browser to render the page while the API loads.
           * The key parameter contains your own API key.
           * The callback parameter executes the initMap() function.
        -->
        <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
    </html>

สร้างอินสแตนซ์ของเครื่องมือระบุตำแหน่งการจัดส่ง

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

ตัวอย่างเหล่านี้แสดงวิธีสร้างอินสแตนซ์ของผู้ให้บริการตำแหน่ง

JavaScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

TypeScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

แสดงเส้นทางที่แชร์

หากต้องการแสดงความคืบหน้าของงานที่กำหนดเวลาไว้ ให้เริ่มต้น มุมมองของงาน ซึ่งจะตั้งค่าเฟรมสำหรับแผนที่ให้สอดคล้องกับตำแหน่งของ การเดินทางที่ติดตาม จากนั้น Consumer SDK จะระบุความคืบหน้าหลังจากได้รับข้อมูลจาก Fleet Engine

เคล็ดลับ

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

ตัวอย่างเหล่านี้แสดงวิธีเริ่มต้นใช้งานมุมมองแผนที่

JavaScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
    // Any undefined styling options use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-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 wish.
  mapView.map.setCenter({lat: 37.2, lng: -121.9});
  mapView.map.setZoom(14);
}

TypeScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
   // Any undefined styling options will use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-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 wish.
  mapView.map.setCenter({lat: 37.2, lng: -121.9});
  mapView.map.setZoom(14);
}

อัปเดตความคืบหน้าในการจัดส่ง

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

ETA
จำนวนป้ายจอดรถที่เหลือ
ระยะทางที่เหลืออยู่ก่อนการรับหรือนำส่ง

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

JavaScript

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

TypeScript

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

แสดงเกณฑ์สำหรับหลายงาน

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

Fleet Engine จะใช้เกณฑ์ในการแสดงงานตามที่แสดงในตารางต่อไปนี้เพื่อจัดการกับสถานการณ์นี้

เกณฑ์ของงาน	ผลลัพธ์
เปิดงานรับสินค้า
มีอยู่ 1 รายการ	แสดงงาน
มีหลายรายการ	ข้อผิดพลาดในการสร้าง
งานรับสินค้าที่ปิดแล้ว
มีอยู่ 1 รายการ	แสดงงาน
มีหลายรายการ (บางรายการมีเวลาผลลัพธ์)	แสดงงานที่มีเวลาผลลัพธ์ล่าสุด
มีหลายรายการ (ไม่มีรายการใดที่มีเวลาผลลัพธ์)	ข้อผิดพลาดในการสร้าง
เปิดงานนำส่ง
มีอยู่ 1 รายการ	แสดงงาน
มีหลายรายการ	ข้อผิดพลาดในการสร้าง
งานนำส่งที่ปิดแล้ว
มีอยู่ 1 รายการ	แสดงงาน
มีหลายรายการ (บางรายการมีเวลาผลลัพธ์)	แสดงงานที่มีเวลาผลลัพธ์ล่าสุด
มีหลายรายการ (ไม่มีรายการใดที่มีเวลาผลลัพธ์)	ข้อผิดพลาดในการสร้าง

หยุดติดตามการจัดส่ง

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

นำรหัสติดตามออก

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

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

จัดการข้อผิดพลาดในการติดตามการจัดส่ง

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

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);
});

หมายเหตุ: อย่าลืมใส่การเรียกใช้ไลบรารีในบล็อก try...catch เพื่อจัดการข้อผิดพลาดที่ไม่คาดคิด

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

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