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

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

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

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

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

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

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

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

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

ใช้ฟังก์ชัน initMap เพื่อสร้างอินสแตนซ์ 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 รายการ การเปลี่ยนแปลงเมตา ข้อมูลจะทริกเกอร์เหตุการณ์ update ออบเจ็กต์ 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 งานต่อรหัสติดตามใน แผนที่ อย่างไรก็ตาม คุณยังต้องกำหนดรหัสติดตามหนึ่งให้กับ สินค้าในการจัดส่งที่ยังคงเชื่อมโยงกับสินค้าตลอดทั้งเส้นทาง ในระบบของคุณ ซึ่งหมายความว่ารหัสติดตามเดียวอาจเชื่อมโยงกับ งานหลายอย่าง เช่น งานรับที่ตามด้วยงานส่งของ พัสดุ หรืองานการจัดส่งที่ล้มเหลวหลายรายการสำหรับพัสดุ

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

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

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

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

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

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

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

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

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

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 จัดการกับข้อผิดพลาดที่ไม่คาดคิด

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

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