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