ไลบรารีการติดตามการจัดส่งของ JavaScript ช่วยให้คุณเห็นภาพตำแหน่งของยานพาหนะ
และสถานที่ที่สนใจที่ติดตามใน Fleet Engine ไลบรารีดังกล่าวมีคอมโพเนนต์แผนที่ JavaScript ที่เป็นการแทนที่แบบดรอปอินสำหรับเอนทิตี google.maps.Map
มาตรฐานและคอมโพเนนต์ข้อมูลเพื่อเชื่อมต่อกับ Fleet Engine เมื่อใช้ไลบรารีการติดตามการจัดส่งของ JavaScript
คุณสามารถมอบประสบการณ์การติดตามการจัดส่งแบบภาพเคลื่อนไหวที่ปรับแต่งได้จากเว็บแอปพลิเคชันของคุณ
คอมโพเนนต์
ไลบรารีการติดตามการจัดส่งของ JavaScript มอบคอมโพเนนต์สำหรับการแสดงภาพยานพาหนะและเส้นทางในขณะที่เดินทางไปยังจุดหมาย ตลอดจนฟีดข้อมูลดิบเกี่ยวกับเวลาถึงโดยประมาณของคนขับรถหรือระยะทางที่เหลือในการขับรถ
มุมมองแผนที่การติดตามการจัดส่ง
คอมโพเนนต์มุมมองแผนที่จะแสดงตำแหน่งของรถและจุดหมาย หากทราบเส้นทางของยานพาหนะ คอมโพเนนต์มุมมองแผนที่จะเคลื่อนไหว เมื่อพาหนะเคลื่อนที่ไปตามเส้นทางที่คาดคะเน
ผู้ให้บริการสถานที่จัดส่ง
ผู้ให้บริการสถานที่จัดส่งจะป้อนข้อมูลตำแหน่งของวัตถุที่ติดตามลงในแผนที่ติดตามการจัดส่งสำหรับการติดตามการจัดส่งระยะแรกและระยะสุดท้าย
คุณใช้ผู้ให้บริการสถานที่จัดส่งเพื่อติดตามสิ่งต่อไปนี้ได้
- สถานที่รับหรือนำส่งของการจัดส่ง
- ตำแหน่งและเส้นทางของยานพาหนะที่นำส่ง
ออบเจ็กต์ตำแหน่งที่ติดตาม
ผู้ให้บริการตำแหน่งจะติดตามตำแหน่งของวัตถุ เช่น ยานพาหนะและจุดหมาย
ตำแหน่งปลายทาง
ตำแหน่งปลายทางคือตำแหน่งที่การเดินทางสิ้นสุด ส่วนการติดตามการจัดส่งคือสถานที่ปฏิบัติงานที่วางแผนไว้
ตำแหน่งของยานพาหนะ
ตำแหน่งของรถคือตำแหน่งที่ติดตามของยานพาหนะ และอาจรวมเส้นทางสำหรับรถไว้ด้วย (ไม่บังคับ)
ตัวเรียกโทเค็นการตรวจสอบสิทธิ์
หากต้องการควบคุมการเข้าถึงข้อมูลตำแหน่งที่จัดเก็บไว้ใน Fleet Engine คุณต้องใช้บริการสร้าง JSON Web Token (JWT) สำหรับ Fleet Engine บนเซิร์ฟเวอร์ จากนั้นใช้ตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์เป็นส่วนหนึ่งของเว็บแอปพลิเคชัน โดยใช้ไลบรารีการแชร์เส้นทางของ JavaScript เพื่อตรวจสอบสิทธิ์ในการเข้าถึงข้อมูลตำแหน่ง
ตัวเลือกการจัดรูปแบบ
รูปแบบเครื่องหมายและเส้นประกอบจะกำหนดรูปลักษณ์ของวัตถุตำแหน่งที่ติดตามบนแผนที่ คุณใช้ตัวเลือกการจัดรูปแบบที่กำหนดเองเพื่อเปลี่ยนการจัดรูปแบบเริ่มต้นให้ตรงกับการจัดรูปแบบของเว็บแอปพลิเคชันได้
ควบคุมการเปิดเผยสถานที่ที่ติดตาม
ส่วนนี้จะอธิบายการควบคุมการเปิดเผยสำหรับวัตถุที่ติดตามบนแผนที่ กฎเหล่านี้ใช้กับออบเจ็กต์ 2 หมวดหมู่ ดังนี้
- เครื่องหมายระบุตำแหน่ง
- ข้อมูลงาน
การแสดงเครื่องหมายระบุตำแหน่ง
เครื่องหมายระบุตำแหน่งทั้งหมดของต้นทางและปลายทางจะแสดงบนแผนที่เสมอ เช่น สถานที่นำส่งสินค้าจะแสดงบนแผนที่เสมอ โดยไม่คำนึงถึงสถานะของการนำส่ง
ระดับการเข้าถึงข้อมูลงาน
ส่วนนี้จะอธิบายกฎระดับการเข้าถึงเริ่มต้นที่ใช้กับข้อมูลงาน เช่น ตำแหน่งของรถและเส้นทางที่เหลือ คุณสามารถปรับแต่งงานได้มากมาย แต่ไม่ใช่ทั้งหมด
- งานที่ไม่พร้อมใช้งาน -- คุณไม่สามารถปรับแต่งการเปิดเผยสำหรับงานเหล่านี้ได้
- งานในยานพาหนะที่ใช้งานอยู่ -- คุณสามารถปรับแต่งงานประเภทนี้ได้
- งานยานพาหนะที่ไม่มีการใช้งาน -- คุณไม่สามารถปรับแต่งระดับการเข้าถึงสำหรับงานเหล่านี้ได้
งานที่ไม่พร้อมใช้งาน
หากมีงานที่ไม่พร้อมให้บริการอย่างน้อย 1 อย่าง (เช่น หากคนขับหยุดพักหรือเติมน้ำมันยานพาหนะ) ในเส้นทางไปยังงานที่ติดตามอยู่ ระบบจะไม่แสดงยานพาหนะนั้น เวลาถึงโดยประมาณและเวลาของงานโดยประมาณจะยังคงอยู่
งานเกี่ยวกับยานพาหนะที่ใช้งานอยู่
ออบเจ็กต์ TaskTrackingInfo
มีองค์ประกอบข้อมูลจำนวนมากที่จะแสดงได้ในไลบรารีการติดตามการจัดส่ง โดยค่าเริ่มต้น ช่องเหล่านี้จะปรากฏเมื่อมีการมอบหมายงานให้กับรถและเมื่อยานพาหนะอยู่ในระยะ 5 รอบหลังจากงานเสร็จ การเปิดเผยจะสิ้นสุดลงเมื่องานเสร็จสมบูรณ์หรือยกเลิก ช่องต่างๆ มีดังนี้
- เส้นประกอบเส้นทาง
- เวลาถึงโดยประมาณ
- เวลาที่ใช้ดำเนินการจนเสร็จโดยประมาณ
- ระยะทางที่เหลือในการขับรถไปยังงาน
- จำนวนการแวะพักที่เหลือ
- ตำแหน่งของยานพาหนะ
คุณปรับแต่งการกำหนดค่าระดับการเข้าถึงสำหรับแต่ละงานได้โดยตั้งค่า TaskTrackingViewConfig
ในงานเมื่อสร้างหรืออัปเดตงานภายใน Fleet Engine วิธีนี้จะสร้างกฎว่าองค์ประกอบข้อมูลหนึ่งๆ จะพร้อมใช้งานเมื่อใด ซึ่งขึ้นอยู่กับเกณฑ์ต่อไปนี้ (หรือที่เรียกว่าตัวเลือกระดับการเข้าถึงด้านล่าง)
- จำนวนการแวะพักที่เหลืออยู่
- ระยะเวลาจนถึงเวลาถึงโดยประมาณ
- ระยะทางที่เหลือในการขับรถ
- แสดงเสมอ
- ไม่เคยแสดง
โปรดทราบว่าองค์ประกอบข้อมูลแต่ละรายการจะเชื่อมโยงกับตัวเลือกการเปิดเผยได้เพียงหนึ่งตัวเลือกเท่านั้น คุณไม่สามารถรวมเกณฑ์โดยใช้ OR หรือ AND
ตัวอย่างการปรับแต่งมีดังนี้ กฎของการกำหนดค่าเองมีดังนี้
- แสดงเส้นประกอบเส้นทางหากรถอยู่ภายใน 3 ป้าย
- แสดงเวลาถึงโดยประมาณหากระยะทางที่เหลือในการขับขี่สั้นกว่า 5,000 เมตร
- ไม่ต้องแสดงจำนวนการหยุดพักที่เหลือ
- ช่องแต่ละช่องอื่นๆ จะยังคงมองเห็นตามค่าเริ่มต้นที่จะแสดงเมื่อยานพาหนะอยู่ในช่วง 5 หยุดของงาน
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
นอกจากนี้ คุณยังปรับแต่งการกำหนดค่าระดับการเข้าถึงเริ่มต้นสำหรับโปรเจ็กต์ได้โดยติดต่อทีมสนับสนุน
กฎการแสดงเส้นประกอบเส้นทางและตำแหน่งในรถ
เมื่อมองเห็นเส้นประกอบของเส้นทาง จะต้องมองเห็นตำแหน่งของรถด้วย ไม่เช่นนั้นจะสามารถระบุตำแหน่งของรถได้ด้วยจุดสิ้นสุดของเส้นประกอบ ซึ่งหมายความว่าเส้นประกอบของเส้นทางจะไม่มีตัวเลือกระดับการเข้าถึงที่จำกัดน้อยกว่านี้
คุณต้องปฏิบัติตามกฎเหล่านี้เพื่อให้ชุดค่าผสมการแสดงตำแหน่งเส้นทาง / ตำแหน่งยานพาหนะที่ถูกต้อง
เมื่อเส้นประกอบเส้นทางและตำแหน่งในยานพาหนะมีประเภทตัวเลือกการเปิดเผยเดียวกัน ดังนี้
- หากตัวเลือกการเปิดเผยคือจำนวนจุดแวะ ระยะเวลาจนถึงเวลาถึงโดยประมาณ หรือระยะทางที่เหลือของการขับขี่ เส้นประกอบเส้นทางต้องระบุค่าที่น้อยกว่าหรือเท่ากับค่าที่กำหนดไว้สำหรับตัวเลือกการเปิดเผยนี้สำหรับตำแหน่งยานพาหนะ ตัวอย่างเช่น
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, }
- หากเส้นแสดงเส้นทางมีตัวเลือกการมองเห็นที่มองเห็นได้เสมอ ตำแหน่งของรถต้องระบุตัวเลือกการเปิดเผยที่มองเห็นได้เสมอด้วย
- หากตำแหน่งของรถไม่มีตัวเลือกการเปิดเผยที่มองเห็นได้ เส้นประกอบเส้นทางต้องมีตัวเลือกการเปิดเผยที่มองไม่เห็นด้วย
เมื่อเส้นประกอบเส้นทางและตำแหน่งในยานพาหนะมีประเภทตัวเลือกการเปิดเผยแตกต่างกัน ตำแหน่งของรถจะแสดงก็ต่อเมื่อเป็นไปตามตัวเลือกการเปิดเผยทั้ง 2 อย่างเท่านั้น
ตัวอย่างเช่น
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, }
ในตัวอย่างนี้ ตำแหน่งของรถจะเห็นได้ต่อเมื่อจำนวนป้ายที่เหลืออยู่อย่างน้อย 3 และ ระยะทางขับรถที่เหลืออยู่อย่างน้อย 3, 000 เมตร
เริ่มต้นใช้งานไลบรารีการแชร์ JavaScript Journey
ก่อนใช้ไลบรารีการแชร์เส้นทางของ JavaScript โปรดทำความคุ้นเคยกับ Fleet Engine และการรับคีย์ API
หากต้องการติดตามการจัดส่ง ให้สร้างการอ้างสิทธิ์รหัสติดตามก่อน
สร้างการอ้างสิทธิ์รหัสติดตาม
หากต้องการติดตามการจัดส่งโดยใช้ผู้ให้บริการสถานที่จัดส่ง ให้สร้าง JSON Web Token (JWT) ที่มีการอ้างสิทธิ์รหัสติดตาม
หากต้องการสร้างเพย์โหลด JWT ให้เพิ่มการอ้างสิทธิ์เพิ่มเติมในส่วนการให้สิทธิ์ที่มีรหัสติดตามของคีย์ กำหนดค่าของคำสั่งซื้อเป็นรหัสติดตามการจัดส่ง
ตัวอย่างต่อไปนี้แสดงวิธีสร้างโทเค็นสำหรับการติดตามตามรหัสติดตาม
{
"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 จะขอโทเค็นผ่านตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์เมื่อเงื่อนไขข้อใดข้อหนึ่งต่อไปนี้เป็นจริง
- ไม่มีโทเค็นที่ถูกต้อง เช่น ในกรณีที่ไม่ได้เรียกใช้ Fetcher ในการโหลดหน้าเว็บใหม่ หรือเมื่อ Googlebot ไม่ได้ส่งโทเค็นกลับมา
- โทเค็นที่ดึงข้อมูลไว้ก่อนหน้านี้หมดอายุแล้ว
- โทเค็นที่ดึงข้อมูลก่อนหน้านี้จะปรากฏภายใน 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 ต่อไปนี้คือ URL สำหรับตัวอย่างแบ็กเอนด์ของแอป
- https://
SERVER_URL
/token/delivery_driver/DELIVERY_VEHICLE_ID
- https://
SERVER_URL
/token/delivery_consumer/TRACKING_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
โหลดแผนที่จาก 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 เพื่อติดตามการมารับสินค้าหรือการนำส่ง อย่าลืมโหลดไลบรารีจากฟังก์ชันเรียกกลับที่ระบุในแท็กสคริปต์ก่อนที่จะเรียกใช้โค้ด
สร้างอินสแตนซ์ผู้ให้บริการสถานที่จัดส่ง
ไลบรารีการติดตามการจัดส่งของ 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',
});
เริ่มต้นมุมมองแผนที่
หลังจากโหลดไลบรารีการแชร์เส้นทางการท่องเว็บแล้ว ให้เริ่มต้นมุมมองแผนที่ แล้วเพิ่มลงในหน้า HTML หน้าเว็บของคุณควรมีองค์ประกอบ <div> ที่มีมุมมองแผนที่ ในตัวอย่างต่อไปนี้ องค์ประกอบ <div> มีชื่อว่า map_canvas
เพื่อหลีกเลี่ยงเงื่อนไขในการแข่งขัน ให้ตั้งค่ารหัสติดตามสำหรับผู้ให้บริการตำแหน่งในโค้ดเรียกกลับที่มีการเรียกใช้หลังจากเริ่มต้นแผนที่
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 รายการ งานนั้นจะปรากฏขึ้น
- หากมีงานรับสินค้าที่ปิดไปแล้วหลายรายการ ระบบจะแสดงงานที่มีเวลาผลลัพธ์ล่าสุด
- หากมีงานรับสินค้าที่ปิดไปแล้วหลายงาน ไม่มีงานใดที่มีเวลาแสดงผลลัพธ์ ระบบจะสร้างข้อผิดพลาดขึ้น
- มิฉะนั้นจะไม่แสดงงาน
ฟังเหตุการณ์การเปลี่ยนแปลง
คุณเรียกข้อมูลเมตาเกี่ยวกับงานจากออบเจ็กต์ข้อมูลการติดตามงานได้โดยใช้ผู้ให้บริการตำแหน่ง ข้อมูลเมตาประกอบด้วยเวลาถึงโดยประมาณ จำนวนครั้งที่แวะพักที่เหลือ และระยะทางที่เหลือก่อนไปรับที่ร้านหรือจัดส่ง การเปลี่ยนแปลงข้อมูลเมตาจะทำให้เกิดเหตุการณ์ 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()
มุมมองที่มีแผนที่ - ย้ายการปรับแต่งไปไว้ในฟังก์ชันเรียกกลับสำหรับการเริ่มต้นมุมมองแผนที่
- เพิ่มไลบรารีตำแหน่งลงในตัวโหลด 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 แพ็กเกจดังกล่าวจะแสดงในแผนที่