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

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

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

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

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

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

takenPolylineCustomization สำหรับเส้นทางที่เดินทางแล้ว
activePolylineCustomization สำหรับเส้นทางการเดินทางที่กระตือรือร้น
remainingPolylineCustomization สำหรับเส้นทางที่ยังไม่ได้เดินทาง

เปลี่ยนการจัดรูปแบบของวัตถุ `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

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

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

คอมโพเนนต์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript

TypeScript

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

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

รหัสติดตาม

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

JavaScript

TypeScript

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

JavaScript

TypeScript

หยุดติดตาม

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

ปิดใช้การปรับให้พอดีอัตโนมัติ

JavaScript

TypeScript

แทนที่แผนที่ที่มีอยู่

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

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

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

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

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