ส่วนนี้จะแสดงวิธีใช้ไลบรารีการติดตามยานพาหนะ JavaScript เพื่อติดตามยานพาหนะสำหรับการเดินทางแบบออนดีมานด์หรืองานที่กำหนดเวลาไว้
หากต้องการติดตามยานพาหนะ ให้ทำตามขั้นตอนต่อไปนี้
- โหลดไลบรารีและเริ่มต้นมุมมองแผนที่
- ระบุตำแหน่งของยานพาหนะและมุมมองแผนที่
- ฟังเหตุการณ์และจัดการข้อผิดพลาด
- หยุดติดตาม
โหลดคลังภาพและเริ่มต้นมุมมองแผนที่
หากต้องการแสดงการดำเนินการของกลุ่มยานพาหนะบนแผนที่ในหน้าเว็บ ให้ใช้สคริปต์ที่เรียกใช้แผนที่โดยใช้คีย์ API ตัวอย่างต่อไปนี้แสดงวิธีดำเนินการนี้จาก HTML
แหล่งที่มาของ URL: เรียกใช้ Google Maps API เพื่อขอแผนที่โดยใช้คีย์ API
พารามิเตอร์
callback: เรียกใช้ฟังก์ชันinitMapหลังจากที่ API แสดงผลลัพธ์การเรียกพารามิเตอร์
libraries: โหลดไลบรารีการติดตามของ Fleetแอตทริบิวต์
defer: ช่วยให้เบราว์เซอร์แสดงผลส่วนที่เหลือของหน้าเว็บต่อไปขณะที่โหลด API<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
ระบุตำแหน่งของยานพาหนะและมุมมองแผนที่
หากต้องการเริ่มติดตามยานพาหนะ คุณต้องสร้างอินสแตนซ์ของผู้ให้บริการตำแหน่งของยานพาหนะและเริ่มต้นมุมมองแผนที่ด้วยรหัสยานพาหนะตามที่อธิบายไว้ในส่วนต่อไปนี้
สร้างอินสแตนซ์ของผู้ให้บริการตำแหน่งของยานพาหนะ
ไลบรารีการติดตามยานพาหนะ JavaScript มีผู้ให้บริการตำแหน่งสำหรับ Fleet Engine API ใช้รหัสโปรเจ็กต์และการอ้างอิงถึงเครื่องมือรับข้อมูลโทเค็นเพื่อสร้างอินสแตนซ์ ดังที่แสดงในตัวอย่างต่อไปนี้
การเดินทางแบบออนดีมานด์
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
งานที่กำหนดเวลาไว้
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
เริ่มต้นมุมมองแผนที่
หลังจากโหลดไลบรารีการแชร์เส้นทาง JavaScript ให้เริ่มต้นใช้งานมุมมองแผนที่และเพิ่มลงในหน้า HTML หน้าเว็บควรมีองค์ประกอบ <div> ที่เก็บมุมมองแผนที่ องค์ประกอบ <div> มีชื่อว่า map_canvas ในตัวอย่างต่อไปนี้=
การเดินทางแบบออนดีมานด์
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
งานที่กำหนดเวลาไว้
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
รอรับเหตุการณ์และจัดการข้อผิดพลาด
เมื่อเริ่มติดตามยานพาหนะแล้ว คุณจะต้องอัปเดตความคืบหน้าของยานพาหนะบนแผนที่ และจัดการข้อผิดพลาดขณะที่ยานพาหนะเดินทางไปตามเส้นทาง
รอรับเหตุการณ์ยานพาหนะ
หากต้องการติดตามความคืบหน้าของยานพาหนะสำหรับการเดินทางแบบออนดีมานด์หรืองานที่กำหนดเวลาไว้ คุณจะต้องฟังเหตุการณ์การเปลี่ยนแปลง
คุณดึงข้อมูลเมตาจากออบเจ็กต์ vehicle หรือ deliveryVehicle โดยใช้ผู้ให้บริการตำแหน่ง ข้อมูลเมตาประกอบด้วยเวลาถึงโดยประมาณและระยะทางที่เหลือก่อนการไปรับหรือส่งผู้โดยสารครั้งถัดไปของยานพาหนะ การเปลี่ยนแปลงข้อมูลเมตาจะทริกเกอร์เหตุการณ์อัปเดตในผู้ให้บริการตำแหน่ง
ตัวอย่างต่อไปนี้แสดงวิธีฟังเหตุการณ์การเปลี่ยนแปลงเหล่านี้
การเดินทางแบบออนดีมานด์
JavaScript
locationProvider.addListener('update', e => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
งานที่กำหนดเวลาไว้
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
จัดการข้อผิดพลาด
หลังจากโหลดไลบรารีการแชร์เส้นทาง JavaScript ให้เริ่มต้นใช้งานมุมมองแผนที่และเพิ่มลงในหน้า HTML หน้าเว็บควรมีองค์ประกอบ <div> ที่เก็บมุมมองแผนที่ องค์ประกอบ <div> มีชื่อว่า map_canvas ในตัวอย่างต่อไปนี้=
การเดินทางแบบออนดีมานด์
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
งานที่กำหนดเวลาไว้
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
หยุดติดตามยานพาหนะ
หากต้องการหยุดติดตามยานพาหนะ คุณต้องนำยานพาหนะออกจากผู้ให้บริการตำแหน่งและนำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่ตามที่อธิบายไว้ในส่วนต่อไปนี้ ตัวอย่างที่นี่ใช้ได้กับทั้งการใช้งานการเดินทางแบบออนดีมานด์และงานที่ตั้งเวลาไว้
นำยานพาหนะออกจากผู้ให้บริการตำแหน่ง
หากต้องการหยุดผู้ให้บริการตำแหน่งไม่ให้ติดตามยานพาหนะ ให้นำรหัสยานพาหนะนำส่งออกจากผู้ให้บริการตำแหน่ง
การเดินทางแบบออนดีมานด์
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
งานที่กำหนดเวลาไว้
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
นำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่
ตัวอย่างต่อไปนี้แสดงวิธีนำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);