Library Pelacakan Armada JavaScript memungkinkan Anda memvisualisasikan lokasi
kendaraan di armada Anda hampir secara real time. Library ini menggunakan On Demand
Rides and Deliveries API
untuk memungkinkan visualisasi kendaraan serta perjalanan. Library Pelacakan Armada JavaScript berisi komponen peta JavaScript yang merupakan pengganti langsung untuk entitas google.maps.Map
dan komponen data standar agar terhubung dengan Fleet Engine.
Komponen
Library Pelacakan Armada JavaScript menyediakan komponen untuk visualisasi kendaraan dan titik jalan perjalanan, serta feed data mentah untuk PWT atau jarak tersisa perjalanan.
Tampilan peta Pelacakan Armada
Komponen tampilan peta Fleet Tracking memvisualisasikan lokasi kendaraan dan titik jalan perjalanan. Jika rute untuk kendaraan diketahui, komponen tampilan peta akan menganimasikan kendaraan tersebut saat melaju di sepanjang jalur yang diprediksi.
Penyedia lokasi
Penyedia lokasi menggunakan informasi yang disimpan di Fleet Engine untuk mengirimkan informasi lokasi objek yang dilacak ke peta berbagi perjalanan.
Penyedia lokasi kendaraan
Penyedia lokasi kendaraan menampilkan informasi lokasi kendaraan tunggal. Halaman ini berisi informasi tentang lokasi kendaraan dan perjalanan saat ini yang ditetapkan ke kendaraan.
Penyedia lokasi armada
Penyedia lokasi armada menampilkan informasi lokasi untuk beberapa kendaraan. Anda dapat memfilter untuk menampilkan kendaraan tertentu beserta lokasinya, atau Anda dapat menampilkan lokasi kendaraan untuk seluruh armada.
Mengontrol visibilitas lokasi yang dilacak
Aturan visibilitas menentukan kapan objek lokasi yang dilacak akan terlihat di Peta untuk penyedia lokasi Fleet Engine. Catatan - Menggunakan penyedia lokasi kustom atau turunan dapat mengubah aturan visibilitas.
Kendaraan
Kendaraan akan terlihat segera setelah dibuat di Fleet Engine, dan terlihat
saat Vehicle_state adalah Online
. Artinya, kendaraan dapat terlihat bahkan
saat tidak ada perjalanan saat ini yang ditetapkan ke kendaraan.
Penanda lokasi titik jalan
Penanda lokasi titik jalan menunjukkan titik di sepanjang perjalanan kendaraan yang dimulai dengan tempat asal dan diakhiri dengan tujuan akhir. Penanda lokasi titik jalan dapat ditentukan sebagai berikut:
- Asal - menunjukkan lokasi awal perjalanan kendaraan
- Menengah - menunjukkan persinggahan untuk perjalanan kendaraan
- Tujuan - menunjukkan lokasi akhir untuk perjalanan kendaraan
Titik jalan kendaraan terencana ditampilkan pada peta sebagai penanda asal, perantara, dan tujuan.
Memulai Library Pelacakan Fleet JavaScript
Sebelum menggunakan Library Pelacakan Fleet JavaScript, pastikan Anda memahami Fleet Engine dan mendapatkan kunci API. Kemudian, buat ID perjalanan dan klaim ID kendaraan.
Membuat klaim ID perjalanan dan ID kendaraan
Untuk melacak kendaraan menggunakan penyedia lokasi kendaraan, buat Token Web JSON (JWT) dengan ID perjalanan dan klaim ID kendaraan.
Untuk membuat payload JWT, tambahkan klaim tambahan di bagian otorisasi
dengan kunci tripid
dan vehicleid
, lalu tetapkan value
setiap kunci ke *.
Token harus dibuat menggunakan peran Cloud IAM Fleet Engine Service Super User. Perlu diperhatikan bahwa hal ini memberikan akses luas untuk membuat, membaca, dan mengubah entity Fleet Engine, dan hanya boleh dibagikan kepada pengguna tepercaya.
Contoh berikut menunjukkan cara membuat token untuk pelacakan berdasarkan kendaraan dan tugas:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
"sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"tripid": "*",
"vehicleid": "*",
}
}
Membuat pengambil token autentikasi
Library Pelacakan Fleet JavaScript meminta token menggunakan pengambil token autentikasi jika salah satu kondisi berikut terpenuhi:
- Fragmen ini tidak memiliki token yang valid, seperti jika pengambil belum memanggil pengambil pada pemuatan halaman baru, atau saat pengambil belum menampilkan token.
- Masa berlaku token yang diambil sebelumnya telah berakhir.
- Masa berlaku token yang diambil sebelumnya akan berakhir dalam waktu satu menit.
Jika tidak, library akan menggunakan token yang diterbitkan sebelumnya dan masih valid, serta tidak memanggil pengambil.
Anda dapat membuat pengambil token autentikasi untuk mengambil token yang dibuat dengan klaim yang sesuai di server menggunakan sertifikat akun layanan untuk project Anda. Penting untuk hanya membuat token di server dan jangan pernah membagikan sertifikat Anda ke klien apa pun. Jika tidak, Anda dapat mengganggu keamanan sistem.
Pengambil harus menampilkan struktur data dengan dua kolom, yang digabungkan dalam Promise:
- String
token
. - Nomor
expiresInSeconds
. Masa berlaku token akan berakhir dalam waktu ini setelah diambil.
Contoh berikut menunjukkan cara membuat pengambil token autentikasi:
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(),
};
}
Saat menerapkan endpoint sisi server untuk pembuatan token, perhatikan hal berikut:
- Endpoint harus menampilkan waktu habis masa berlaku untuk token; dalam contoh di atas,
ditentukan sebagai
data.ExpiresInSeconds
. - Pengambil token autentikasi harus meneruskan waktu masa berakhir (dalam detik, dari waktu pengambilan) ke library, seperti yang ditunjukkan dalam contoh.
- SERVER_TOKEN_URL bergantung pada implementasi backend Anda, berikut adalah contoh URL:
- https://
SERVER_URL
/token/driver/VEHICLE_ID
- https://
SERVER_URL
/token/consumer/TRIP_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
Memuat peta dari HTML
Contoh berikut menunjukkan cara memuat library Berbagi Perjalanan JavaScript
dari URL yang ditentukan. Parameter callback mengeksekusi fungsi initMap
setelah API dimuat. Atribut defer memungkinkan browser terus merender
sisa halaman Anda saat API dimuat.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta" defer></script>
Ikuti kendaraan
Bagian ini menunjukkan cara menggunakan Library Pelacakan Armada JavaScript untuk memantau kendaraan. Pastikan untuk memuat library dari fungsi callback yang ditentukan dalam tag skrip sebelum menjalankan kode Anda.
Membuat instance penyedia lokasi kendaraan
Library Pelacakan Fleet JavaScript menentukan penyedia lokasi untuk On Demand Rides dan Deliveries API. Gunakan project ID dan referensi ke factory token Anda untuk membuat instance.
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',
});
Melakukan inisialisasi tampilan peta
Setelah memuat library Berbagi Perjalanan JavaScript, lakukan inisialisasi tampilan peta, lalu tambahkan ke halaman HTML. Halaman Anda harus berisi elemen <div> yang menyimpan tampilan peta. Elemen <div> diberi nama map_canvas dalam contoh di bawah ini.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// 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 wish.
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],
// Styling customizations; see below.
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// 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 wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Memproses peristiwa perubahan
Anda dapat mengambil informasi meta tentang kendaraan dari objek vehicle
menggunakan penyedia lokasi. Informasi meta mencakup PWT dan jarak tersisa
sebelum pengangkutan atau penurunan kendaraan berikutnya. Perubahan pada informasi
meta akan memicu peristiwa update. Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.
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);
}
});
Memantau error
Error yang muncul secara asinkron saat permintaan informasi kendaraan memicu peristiwa error. Contoh berikut menunjukkan cara memproses peristiwa ini untuk menangani error.
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);
});
Hentikan pelacakan
Agar penyedia lokasi tidak melacak kendaraan, hapus ID kendaraan dari penyedia lokasi.
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
Menghapus penyedia lokasi dari tampilan peta
Contoh berikut menampilkan cara menghapus penyedia lokasi dari tampilan peta.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Melihat armada kendaraan
Bagian ini menunjukkan cara menggunakan library JavaScript Journey Sharing untuk melihat armada kendaraan. Pastikan untuk memuat library dari fungsi callback yang ditentukan dalam tag skrip sebelum menjalankan kode Anda.
Membuat instance penyedia lokasi armada kendaraan
Library Pelacakan Fleet JavaScript sebelumnya menentukan penyedia lokasi yang mengambil beberapa kendaraan dari On Demand Rides and Deliveries API. Gunakan project ID Anda serta referensi ke pengambil token untuk membuat instance.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
vehicleFilter
menentukan kueri yang digunakan untuk memfilter kendaraan yang ditampilkan di peta.
Filter ini diteruskan langsung ke Fleet Engine. Lihat
ListVehiclesRequest
untuk mengetahui format yang didukung.
locationRestriction
membatasi area untuk menampilkan kendaraan di peta.
Tag situs global juga mengontrol apakah pelacakan lokasi aktif atau tidak. Pelacakan lokasi tidak akan dimulai hingga ini ditetapkan.
Setelah penyedia lokasi dibuat, inisialisasi tampilan peta.
Menetapkan pembatasan lokasi menggunakan area pandang peta
Batas locationRestriction
dapat dikonfigurasi agar cocok dengan area yang terlihat dalam tampilan peta.
JavaScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
TypeScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
Memproses peristiwa perubahan
Anda dapat mengambil informasi meta tentang fleet dari objek vehicles
menggunakan penyedia lokasi. Informasi meta mencakup properti kendaraan seperti status navigasi, jarak ke titik jalan berikutnya, dan atribut khusus; lihat dokumentasi referensi untuk mengetahui detail selengkapnya. Perubahan pada informasi meta akan memicu peristiwa update. Contoh
berikut menunjukkan cara memproses peristiwa perubahan ini.
JavaScript
locationProvider.addListener('update', e => {
// e.vehicles contains data that may be
// useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
// e.vehicles contains data that may be useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
Memantau error
Error yang muncul secara asinkron karena permintaan informasi fleet kendaraan akan memicu peristiwa error. Untuk mengetahui contoh yang menunjukkan cara memproses peristiwa ini, lihat bagian Memproses error.
Hentikan pelacakan
Untuk menghentikan penyedia lokasi melacak fleet, tetapkan batas penyedia lokasi ke null.
JavaScript
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
Menghapus penyedia lokasi dari tampilan peta
Contoh berikut menampilkan cara menghapus penyedia lokasi dari tampilan peta.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Menyesuaikan tampilan dan nuansa peta dasar
Untuk menyesuaikan tampilan dan nuansa komponen peta, tata gaya peta Anda menggunakan alat berbasis cloud atau dengan menetapkan opsi langsung dalam kode.
Menggunakan gaya visual peta berbasis cloud
Gaya visual peta berbasis Cloud memungkinkan Anda membuat dan mengedit gaya peta untuk setiap aplikasi yang menggunakan Google Maps dari Konsol Google Cloud tanpa memerlukan perubahan pada kode. Gaya peta disimpan sebagai ID peta di project Cloud Anda. Untuk menerapkan gaya pada
peta Pelacakan Armada JavaScript, tentukan
mapId
saat Anda membuat JourneySharingMapView
. Kolom mapId
tidak dapat diubah
atau ditambahkan setelah JourneySharingMapView
dibuat instance-nya. Contoh berikut menunjukkan cara mengaktifkan gaya peta yang dibuat sebelumnya dengan ID peta.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
Menggunakan gaya visual peta berbasis kode
Cara lain untuk menyesuaikan gaya visual peta adalah dengan menetapkan mapOptions
saat Anda membuat 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" }
]
}
]
}
});
Menggunakan penyesuaian penanda
Dengan Library Pelacakan Fleet JavaScript, Anda dapat menyesuaikan tampilan dan nuansa penanda yang ditambahkan ke peta. Anda melakukannya dengan menentukan penyesuaian penanda, yang kemudian diterapkan oleh Library Pelacakan Armada sebelum menambahkan penanda ke peta dan setiap pembaruan penanda.
Anda dapat membuat penyesuaian sederhana dengan menentukan objek MarkerOptions
untuk diterapkan ke semua penanda dari jenis yang sama. Perubahan yang ditentukan dalam objek diterapkan setelah setiap penanda dibuat, sehingga menimpa opsi default.
Sebagai opsi lanjutan, Anda dapat menentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan penataan gaya penanda berdasarkan data, serta menambahkan interaktivitas ke penanda, seperti penanganan klik. Secara khusus, Pelacakan Fleet meneruskan data ke fungsi penyesuaian tentang jenis objek yang direpresentasikan oleh penanda: kendaraan, perhentian, atau tugas. Hal ini memungkinkan gaya visual penanda berubah berdasarkan status elemen penanda itu sendiri saat ini; misalnya, jumlah perhentian yang tersisa atau jenis tugas. Anda bahkan dapat menggabungkan penanda dengan data dari sumber di luar Fleet Engine dan memberi gaya penanda berdasarkan informasi tersebut.
Selain itu, Anda dapat menggunakan fungsi penyesuaian untuk memfilter visibilitas penanda.
Untuk melakukannya, panggil
setVisible(false)
pada penanda.
Namun, karena alasan performa, sebaiknya filter dengan pemfilteran
native di penyedia lokasi, seperti
FleetEngineFleetLocationProvider.vehicleFilter
.
Dengan demikian, saat memerlukan fungsi pemfilteran tambahan, Anda dapat menerapkan
pemfilteran menggunakan fungsi penyesuaian.
Library Pelacakan Fleet menyediakan parameter penyesuaian berikut:
Ubah gaya visual penanda menggunakan MarkerOptions
Contoh berikut menunjukkan cara mengonfigurasi gaya visual penanda kendaraan dengan objek MarkerOptions
. Ikuti pola ini untuk menyesuaikan gaya visual penanda menggunakan salah satu parameter penyesuaian penanda yang tercantum di atas.
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Mengubah gaya visual penanda menggunakan fungsi penyesuaian
Contoh berikut menunjukkan cara mengonfigurasi gaya visual penanda kendaraan. Ikuti pola ini untuk menyesuaikan gaya visual penanda menggunakan salah satu parameter penyesuaian penanda yang tercantum di atas.
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
Menambahkan penanganan klik ke penanda
Contoh berikut menunjukkan cara menambahkan penanganan klik ke penanda kendaraan. Ikuti pola ini untuk menambahkan penanganan klik ke penanda menggunakan salah satu parameter penyesuaian penanda yang tercantum di atas.
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Memfilter penanda yang terlihat
Contoh berikut menunjukkan cara memfilter penanda kendaraan yang terlihat. Ikuti pola ini untuk memfilter setiap penanda menggunakan salah satu parameter penyesuaian penanda yang tercantum di atas.
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
Menggunakan penyesuaian polyline saat mengikuti kendaraan
Dengan Library Pelacakan Fleet, Anda juga dapat menyesuaikan tampilan dan nuansa rute kendaraan yang diikuti di peta. Library ini membuat objek google.maps.Polyline untuk setiap pasangan koordinat di jalur kendaraan yang aktif atau tersisa.
Anda dapat menata gaya objek Polyline
dengan menentukan penyesuaian polyline. Selanjutnya, library akan menerapkan penyesuaian ini dalam dua situasi: sebelum menambahkan
objek ke peta dan saat data yang digunakan untuk objek telah berubah.
Serupa dengan penyesuaian penanda, Anda dapat menentukan kumpulan
PolylineOptions
yang akan diterapkan ke semua objek Polyline
yang cocok saat
dibuat atau diupdate.
Demikian pula, Anda dapat menentukan fungsi penyesuaian. Fungsi penyesuaian
memungkinkan penataan gaya individu pada objek berdasarkan data yang dikirim oleh Fleet Engine.
Fungsi ini dapat mengubah gaya visual setiap objek berdasarkan status kendaraan saat ini; misalnya, mewarnai objek Polyline
menjadi warna yang lebih dalam, atau membuatnya lebih tebal saat kendaraan melaju lebih lambat. Anda bahkan dapat bergabung dengan
sumber di luar Fleet Engine dan menata gaya objek Polyline
berdasarkan
informasi tersebut.
Anda dapat menentukan penyesuaian menggunakan parameter yang disediakan di FleetEngineVehicleLocationProviderOptions
.
Anda dapat menetapkan penyesuaian untuk berbagai status jalur dalam perjalanan
kendaraan, yang sudah dilalui, bepergian, atau belum dilalui. Parameternya adalah sebagai berikut:
takenPolylineCustomization
, untuk jalur yang sudah dilalui;activePolylineCustomization
, untuk jalur yang aktif berjalan;remainingPolylineCustomization
, untuk jalur yang belum dilalui.
Ubah gaya visual objek Polyline
menggunakan PolylineOptions
Contoh berikut menunjukkan cara mengonfigurasi gaya visual untuk objek Polyline
dengan
PolylineOptions
.
Ikuti pola ini untuk menyesuaikan gaya visual objek Polyline
menggunakan salah satu penyesuaian polyline yang tercantum sebelumnya.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Ubah gaya visual objek Polyline
menggunakan fungsi penyesuaian
Contoh berikut menunjukkan cara mengonfigurasi gaya visual objek Polyline
yang aktif. Ikuti pola ini untuk menyesuaikan gaya visual objek Polyline
menggunakan salah satu parameter penyesuaian polyline yang tercantum sebelumnya.
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
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: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
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'});
}
}
};
Mengontrol visibilitas objek Polyline
Secara default, semua objek Polyline
terlihat. Untuk membuat objek Polyline
tidak terlihat, tetapkan
properti
visible
:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Merender objek Polyline
berbasis traffic
Fleet Engine menampilkan data kecepatan lalu lintas untuk jalur aktif dan tersisa untuk kendaraan yang diikuti. Anda dapat menggunakan informasi ini untuk menata gaya objek Polyline
sesuai dengan kecepatan traffic-nya:
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Menampilkan InfoWindow
untuk penanda lokasi atau kendaraan
Anda dapat menggunakan
InfoWindow
untuk menampilkan informasi tambahan tentang penanda lokasi atau kendaraan.
Contoh berikut menunjukkan cara membuat InfoWindow
dan melampirkannya ke penanda kendaraan.
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 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});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 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();
Nonaktifkan penyesuaian otomatis
Anda dapat menghentikan peta agar tidak otomatis menyesuaikan area pandang ke kendaraan dan rute yang diantisipasi dengan menonaktifkan pencocokan otomatis. Contoh berikut menunjukkan cara menonaktifkan penyesuaian otomatis saat Anda mengonfigurasi tampilan peta berbagi perjalanan.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
Mengganti peta yang ada
Anda dapat mengganti peta yang ada yang menyertakan penanda atau penyesuaian lainnya tanpa kehilangan penyesuaian tersebut.
Misalnya, Anda memiliki halaman web dengan entity google.maps.Map
standar tempat penanda ditampilkan:
<!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 Oracle Park Stadium
var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
// 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 Oracle Park
var marker = new google.maps.Marker({ position: oraclePark, 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>
Untuk menambahkan library Berbagi Perjalanan JavaScript, yang mencakup Pelacakan Fleet:
- Tambahkan kode untuk factory token autentikasi.
- Lakukan inisialisasi penyedia lokasi dalam fungsi
initMap()
. - Lakukan inisialisasi tampilan peta dalam fungsi
initMap()
. Tampilannya berisi peta. - Pindahkan penyesuaian ke fungsi callback untuk inisialisasi tampilan peta.
- Tambahkan library lokasi ke loader API.
Contoh berikut menunjukkan perubahan yang akan dilakukan:
<!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. Use FleetEngineVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
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
});
mapView.addListener('ready', () => {
locationProvider.vehicleId = VEHICLE_ID;
// (4) Add customizations like before.
// The location of Oracle Park
var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
// 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 Oracle Park
var marker = new google.maps.Marker({position: oraclePark, 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, which includes Fleet Tracking functionality.
-->
<script
defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
></script>
</body>
</html>
Jika Anda mengoperasikan kendaraan dengan ID yang ditentukan di dekat Oracle Park, kendaraan tersebut akan dirender pada peta.