ติดตามการจัดส่งด้วยไลบรารีการติดตามการจัดส่ง JavaScript

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

คอมโพเนนต์

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

มุมมองแผนที่การติดตามการจัดส่ง

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

ผู้ให้บริการสถานที่จัดส่ง

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

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

  • สถานที่รับหรือจัดส่งของการจัดส่ง
  • ตำแหน่งและเส้นทางของรถนำส่ง

ออบเจ็กต์ตำแหน่งที่ติดตาม

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

ตำแหน่งปลายทาง

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

ตำแหน่งของรถ

ตำแหน่งของรถคือตำแหน่งของยานพาหนะที่ติดตาม อาจมี ระบุเส้นทางสำหรับยานพาหนะ

ตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์

หากต้องการควบคุมการเข้าถึงข้อมูลตำแหน่งที่จัดเก็บไว้ใน Fleet Engine คุณต้องทำดังนี้ ใช้บริการสร้าง JSON Web Token (JWT) สำหรับ Fleet Engine บนเซิร์ฟเวอร์ของคุณ จากนั้นใช้ตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์เป็นส่วนหนึ่ง ของเว็บแอปพลิเคชัน โดยใช้ JavaScript Journey Share Library เพื่อตรวจสอบสิทธิ์การเข้าถึงข้อมูลตำแหน่ง

ตัวเลือกการจัดรูปแบบ

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

ควบคุมการเปิดเผยสถานที่ที่ติดตาม

ส่วนนี้จะอธิบายการควบคุมการมองเห็นวัตถุที่ติดตามบนแผนที่ กฎเหล่านี้ใช้กับออบเจ็กต์ 2 หมวดหมู่ดังนี้

  • เครื่องหมายระบุตำแหน่ง
  • ข้อมูลงาน

การเปิดเผยเครื่องหมายตำแหน่ง

เครื่องหมายระบุตำแหน่งทั้งหมดสำหรับต้นทางและจุดหมายจะแสดงบนแผนที่เสมอ เช่น สถานที่นำส่งการจัดส่งจะแสดงบนแผนที่เสมอ โดยไม่คำนึงถึงสถานะการนำส่ง

ระดับการเข้าถึงข้อมูลงาน

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

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

งานที่ไม่พร้อมใช้งาน

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

งานเกี่ยวกับยานพาหนะที่คล่องตัว

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

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

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

  • จำนวนป้ายที่เหลือ
  • ระยะเวลาที่จะถึงโดยประมาณ
  • ระยะทางขับรถที่เหลือ
  • แสดงเสมอ
  • ไม่แสดง

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

ตัวอย่างการปรับแต่งมีดังนี้ กฎของการปรับแต่งดังกล่าวมีดังนี้

  • แสดงเส้นประกอบของเส้นทางหากยานพาหนะอยู่ในช่วง 3 ป้าย
  • แสดงเวลาถึงโดยประมาณหากระยะทางการขับรถที่เหลืออยู่น้อยกว่า 5,000 เมตร
  • ไม่ต้องแสดงจำนวนการหยุดพักที่เหลืออยู่
  • แต่ละช่องจะยังคงมีการเปิดเผยเริ่มต้น เมื่อมีการแสดง ยานพาหนะอยู่ภายในรัศมี 5 ป้ายของงาน
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

คุณยังสามารถปรับแต่งการกำหนดค่าการเปิดเผยเริ่มต้นสำหรับโครงการได้โดย การติดต่อทีมสนับสนุน

กฎการระบุเส้นทางและตำแหน่งยานพาหนะ:

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

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

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

    • หากตัวเลือกการเปิดเผยยังมีจำนวนการหยุด ระยะเวลาจะถึง ETA หรือ ระยะการขับขี่ที่เหลืออยู่ เส้นประกอบของเส้นทางต้องระบุค่าที่น้อยกว่า มากกว่าหรือเท่ากับค่าที่ตั้งไว้สำหรับตัวเลือกการเปิดเผยนี้สำหรับยานพาหนะ ตำแหน่งนั้น ตัวอย่างมีดังต่อไปนี้
    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    
    • หากโพลีไลน์ของเส้นทางมีตัวเลือกการแสดงผลที่มองเห็นได้เสมอ ตำแหน่งของยานพาหนะ และต้องแสดงตัวเลือกการแสดงผลที่มองเห็นได้เสมอ
    • หากตำแหน่งของยานพาหนะมีตัวเลือกการเปิดเผยไม่เคยเห็น ให้กำหนดเส้นทางเส้นประกอบ ต้องระบุตัวเลือกการเปิดเผยที่มองไม่เห็นด้วย
  • เมื่อโพลีไลน์ของเส้นทางและตำแหน่งยานพาหนะมีตัวเลือกการเปิดเผยต่างกัน ประเภท ตำแหน่งยานพาหนะ จะแสดงก็ต่อเมื่อมองเห็นได้ทั้ง 2 อย่างเท่านั้น ตัวเลือกที่เหมาะสม

    ตัวอย่างมีดังต่อไปนี้

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingDrivingDistanceMetersThreshold": 3000
      },
    }
    

    ในตัวอย่างนี้ ตำแหน่งของรถจะปรากฏเมื่อจุดแวะที่เหลือเท่านั้น จำนวนอย่างน้อย 3 และระยะทางขับรถที่เหลืออย่างน้อย 3,000 เมตร

เริ่มต้นใช้งานไลบรารีการแชร์เส้นทาง JavaScript

ก่อนใช้ไลบรารีการแชร์เส้นทาง JavaScript โปรดตรวจสอบว่าคุณ คุ้นเคยกับ Fleet Engine และการรับคีย์ API

หากต้องการติดตามการจัดส่ง ให้สร้างการอ้างสิทธิ์รหัสติดตามก่อน

สร้างการอ้างสิทธิ์รหัสติดตาม

หากต้องการติดตามการจัดส่งโดยใช้ผู้ให้บริการสถานที่จัดส่ง สร้าง JSON Web Token (JWT) ที่มีการอ้างสิทธิ์รหัสติดตาม

ในการสร้างเพย์โหลด JWT ให้เพิ่มการอ้างสิทธิ์เพิ่มเติมในส่วนการให้สิทธิ์ ที่มีคีย์ trackingid กำหนดค่าเป็นรหัสติดตามการจัดส่ง

ตัวอย่างต่อไปนี้แสดงวิธีสร้างโทเค็นเพื่อการติดตามด้วยรหัสติดตาม

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "trackingid": "tid_54321",
   }
}

สร้างตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์

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

ตัวดึงข้อมูลต้องแสดงผลโครงสร้างข้อมูล ด้วยฟิลด์ 2 ฟิลด์ ไว้ในคำสัญญา:

  • สตริง token
  • หมายเลข expiresInSeconds โทเค็นจะหมดอายุภายในช่วงเวลานี้หลังจาก การดึงข้อมูล

ไลบรารีการติดตามการจัดส่งของ JavaScript ขอโทเค็นผ่านการตรวจสอบสิทธิ์ ตัวดึงข้อมูลโทเค็นเมื่อรายการใดรายการหนึ่งต่อไปนี้เป็นจริง

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

ไม่เช่นนั้น ไลบรารีจะใช้โทเค็นที่ออกให้ก่อนหน้านี้ ยังใช้งานได้อยู่และ ไม่เรียกใช้ตัวดึงข้อมูล

ตัวอย่างต่อไปนี้แสดงวิธีสร้างตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

เมื่อใช้งานปลายทางฝั่งเซิร์ฟเวอร์สำหรับการสร้างโทเค็น ให้เก็บ ดังต่อไปนี้

  • ปลายทางต้องแสดงเวลาหมดอายุสำหรับโทเค็น ในตัวอย่าง ข้างต้นจะถือว่าเป็น data.ExpiresInSeconds
  • ตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์จะต้องผ่านเวลาหมดอายุ (เป็นวินาที ตั้งแต่เวลาดึงข้อมูล) ไปยังไลบรารี ดังที่แสดงในตัวอย่าง
  • SERVER_TOKEN_URL ขึ้นอยู่กับการใช้งานแบ็กเอนด์ของคุณ นี่คือ URL สำหรับตัวอย่างแบ็กเอนด์ของแอป
    • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
    • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
    • https://SERVER_URL/token/fleet_reader

โหลดแผนที่จาก HTML

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

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

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

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

ยกตัวอย่างผู้ให้บริการสถานที่จัดส่ง

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

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

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

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

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

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

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

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

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // 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 will start 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

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
 // 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 will start 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);

รหัสติดตาม

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

  1. หากมีงานรับสินค้าที่เปิดอยู่ 1 รายการ งานดังกล่าวจะแสดงขึ้น เกิดข้อผิดพลาด หากมีงานรับสินค้าที่เปิดอยู่หลายงาน
  2. หากมีงานนำส่งที่เปิดอยู่ 1 รายการ งานดังกล่าวจะแสดงขึ้น ข้อผิดพลาดคือ ในกรณีที่มีงานแบบเปิดหลายงาน
  3. หากมีงานนำส่งแบบปิด ให้ทำดังนี้
    • หากมีงานนำส่งที่ปิดไปแล้วเพียง 1 รายการ งานดังกล่าวจะแสดงขึ้น
    • หากมีงานนำส่งที่ปิดไปแล้วหลายรายการ งานที่มีงานล่าสุด เวลาของผลลัพธ์จะปรากฏขึ้น
    • หากมีงานนำส่งที่ปิดไปแล้วหลายรายการ จะไม่มีงานใดที่มีผลลัพธ์ ระบบจะแสดงข้อผิดพลาด
  4. หากมีงานรับสินค้าที่ปิดไปแล้ว ให้ทำดังนี้
    • หากมีงานรับสินค้าที่ปิดไปแล้ว 1 รายการ งานดังกล่าวจะแสดงขึ้น
    • หากมีงานรับสินค้าที่ปิดไปแล้วหลายรายการ งานที่มีงานล่าสุด เวลาของผลลัพธ์จะปรากฏขึ้น
    • หากมีงานรับสินค้าที่ปิดไปแล้วหลายรายการ งานไหนก็ไม่มีผลลัพธ์ ระบบจะแสดงข้อผิดพลาด
  5. ไม่เช่นนั้น ระบบจะไม่แสดงงาน

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

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

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

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

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

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

หยุดติดตาม

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

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

ปรับแต่งรูปลักษณ์ของแผนที่ฐาน

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

ใช้การจัดรูปแบบแผนที่ในระบบคลาวด์

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

JavaScript

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

TypeScript

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

ใช้การจัดรูปแบบแผนที่ตามโค้ด

อีกวิธีหนึ่งในการปรับแต่งรูปแบบแผนที่คือการตั้งค่า mapOptions เมื่อคุณ สร้าง JourneySharingMapView

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

ใช้การปรับแต่งเครื่องหมาย

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

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

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

ไลบรารีการติดตามการจัดส่งมีพารามิเตอร์ที่กำหนดเองต่อไปนี้ FleetEngineShipmentLocationProviderOptions:

เปลี่ยนรูปแบบเครื่องหมายโดยใช้ MarkerOptions

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

เปลี่ยนการจัดรูปแบบเครื่องหมายโดยใช้ฟังก์ชันการปรับแต่ง

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

เพิ่มการจัดการการคลิกลงในตัวทำเครื่องหมาย

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

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

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

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

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

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

เปลี่ยนการจัดรูปแบบของวัตถุ Polyline โดยใช้ PolylineOptions

ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบสำหรับออบเจ็กต์ Polyline กับ PolylineOptions ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของออบเจ็กต์ 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.taskTrackingInfo.remainingDrivingDistanceMeters;
    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: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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'});
      }
    }
  };

ควบคุมการเปิดเผยของ Polyline ออบเจ็กต์

โดยค่าเริ่มต้น ระบบจะแสดงวัตถุทั้งหมด Polyline รายการ วิธีสร้างวัตถุ Polyline ซ่อนตัว ตั้งค่า visible พร็อพเพอร์ตี้:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

แสดง InfoWindow สำหรับยานพาหนะหรือเครื่องหมายระบุตำแหน่ง

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

ตัวอย่างต่อไปนี้แสดงวิธีสร้าง InfoWindow และแนบไฟล์ ไปยังหมุดรถ:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 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

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

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 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 เพื่อแทนที่ แผนที่ที่มีอยู่ซึ่งมีเครื่องหมายหรือการปรับแต่งอื่นๆ โดยไม่สูญเสียการปรับแต่งเหล่านั้นไป

ตัวอย่างเช่น สมมติว่าคุณมีหน้าเว็บที่มี google.maps.Map มาตรฐาน เอนทิตีที่จะแสดงเครื่องหมาย:

<!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 Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // 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 Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * 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>

วิธีเพิ่มไลบรารีการแชร์เส้นทาง JavaScript

  1. เพิ่มโค้ดที่ใช้เป็นค่าเริ่มต้นสำหรับโทเค็นการตรวจสอบสิทธิ์
  2. เริ่มต้นผู้ให้บริการตำแหน่งในฟังก์ชัน initMap()
  3. เริ่มต้นมุมมองแผนที่ในฟังก์ชัน initMap() มุมมองนี้มีแผนที่
  4. ย้ายการปรับแต่งของคุณลงในฟังก์ชัน Callback สำหรับการเริ่มต้นมุมมองแผนที่
  5. เพิ่มไลบรารีตำแหน่งลงในตัวโหลด API

ตัวอย่างต่อไปนี้แสดงการเปลี่ยนแปลงที่จะเกิดขึ้น

<!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>
let locationProvider;

// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider.
  locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

  locationProvider.trackingId = TRACKING_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };

    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

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