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