Menata gaya peta

Dokumen ini membahas cara menyesuaikan tampilan dan nuansa peta serta mengontrol visibilitas data dan opsi area pandang. Anda dapat melakukannya dengan beberapa cara berikut:

• Menggunakan gaya visual peta berbasis cloud
• Menetapkan opsi gaya peta langsung di kode Anda sendiri

Menata gaya peta dengan gaya visual peta berbasis cloud

Untuk menerapkan gaya peta ke peta berbagi perjalanan konsumen JavaScript, tentukan mapId dan mapOptions lainnya saat Anda membuat JourneySharingMapView.

Catatan: Anda tidak dapat mengubah atau menambahkan mapId setelah JourneySharingMapView dibuat instance-nya.

Contoh berikut menunjukkan cara menerapkan gaya peta dengan ID peta.

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.
});

Memberi gaya pada peta langsung di kode Anda sendiri

Anda juga dapat menyesuaikan gaya visual peta dengan menetapkan opsi peta saat membuat JourneySharingMapView. Contoh berikut menunjukkan cara menata gaya peta menggunakan opsi peta. Untuk informasi selengkapnya tentang opsi peta yang dapat Anda tetapkan, lihat mapOptions dalam referensi Google Maps JavaScript API.

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" }
        ]
      }
    ]
  }
});

Mengontrol visibilitas data tugas ke SDK

Anda dapat mengontrol visibilitas objek tugas tertentu di peta menggunakan aturan visibilitas.

Catatan: Penanda lokasi selalu terlihat di peta. Misalnya, lokasi pengiriman paket selalu ditampilkan di peta, terlepas dari status pengirimannya. Namun, Anda dapat menyesuaikan tampilan penanda ini. Lihat Menyesuaikan penanda.

Visibilitas default data tugas

Secara default, data untuk tugas yang ditetapkan ke kendaraan terlihat saat kendaraan berada dalam jarak 5 perhentian dari tugas. Visibilitas berakhir saat tugas selesai atau dibatalkan.

Tabel ini menunjukkan visibilitas default untuk setiap jenis tugas. Anda dapat menyesuaikan visibilitas untuk banyak tugas, tetapi tidak semuanya. Untuk mengetahui detail selengkapnya tentang jenis tugas, lihat Jenis tugas di panduan Tugas terjadwal.

Jenis tugas	Visibilitas default	Dapat disesuaikan?	Deskripsi
Tugas ketidaktersediaan	Tidak terlihat	Tidak	Digunakan untuk istirahat pengemudi dan pengisian bahan bakar. Jika rute ke tugas pengiriman juga berisi perhentian kendaraan lain, perhentian tersebut tidak ditampilkan jika hanya berisi tugas ketidaktersediaan. Perkiraan waktu tiba dan perkiraan waktu penyelesaian tugas masih ditampilkan untuk tugas pengiriman itu sendiri.
Membuka tugas kendaraan	Terlihat	Ya	Visibilitas berakhir saat tugas selesai atau dibatalkan. Anda dapat menyesuaikan visibilitas tugas kendaraan terbuka. Lihat Menyesuaikan visibilitas tugas kendaraan terbuka.
Tugas kendaraan tertutup	Tidak terlihat	Tidak	Anda tidak dapat menyesuaikan visibilitas tugas kendaraan yang ditutup.

Menyesuaikan visibilitas tugas kendaraan terbuka

Antarmuka TaskTrackingInfo menyediakan sejumlah elemen data tugas yang dapat dilihat dengan Consumer SDK.

Elemen data tugas yang dapat disesuaikan
Polyline rute Perkiraan waktu tiba Perkiraan waktu penyelesaian tugas	Jarak mengemudi yang tersisa ke tugas Jumlah perhentian yang tersisa Lokasi kendaraan

Opsi visibilitas per tugas

Anda dapat menyesuaikan konfigurasi visibilitas per tugas dengan menetapkan TaskTrackingViewConfig saat membuat atau memperbarui tugas dalam Fleet Engine. Gunakan opsi visibilitas berikut untuk membuat kriteria guna menentukan visibilitas elemen tugas:

Opsi visibilitas
Jumlah perhentian yang tersisa Durasi hingga perkiraan waktu tiba Jarak mengemudi yang tersisa	Selalu terlihat Tidak pernah terlihat

Catatan: Elemen data tertentu hanya dapat dikaitkan dengan satu opsi visibilitas. Anda tidak dapat menggabungkan kriteria menggunakan ATAU atau DAN.

Untuk mengilustrasikan, misalkan contoh penyesuaian menyesuaikan visibilitas untuk tiga elemen data menggunakan kriteria yang ditampilkan dalam tabel berikut. Semua elemen lainnya mengikuti aturan visibilitas default.

Elemen data yang akan disesuaikan	Visibilitas	Kriteria
Polyline rute	Tampilkan	Kendaraan berada dalam jarak 3 perhentian.
PWT	Tampilkan	Jarak mengemudi yang tersisa lebih pendek dari 5.000 meter.
Jumlah perhentian yang tersisa	Jangan tampilkan	Kendaraan berada dalam jarak 3 perhentian.

Contoh berikut menunjukkan konfigurasi ini:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Catatan: Anda juga dapat menyesuaikan opsi visibilitas default untuk project dengan menghubungi tim dukungan.

Aturan visibilitas polyline rute dan lokasi kendaraan

Polyline rute tidak dapat terlihat kecuali jika lokasi kendaraan juga terlihat; jika tidak, lokasi kendaraan dapat disimpulkan dari akhir polyline.

Poin penting: Aturan visibilitas polyline rute harus sama ketatnya atau lebih ketat daripada aturan visibilitas untuk lokasi kendaraan.

Panduan ini membantu Anda memberikan kombinasi yang valid untuk opsi visibilitas polyline rute dan lokasi kendaraan.

Opsi visibilitas yang sama	Kriteria visibilitas	Panduan
	Opsi polyline rute ditetapkan agar selalu terlihat.	Tetapkan lokasi kendaraan agar selalu terlihat.
	Lokasi kendaraan disetel ke tidak pernah terlihat.	Menetapkan polyline rute agar tidak pernah terlihat.
	Opsi visibilitas adalah salah satu dari: jumlah perhentian yang tersisa durasi hingga PWT jarak mengemudi yang tersisa	Tetapkan opsi polyline rute ke nilai yang kurang dari atau sama dengan nilai yang ditetapkan untuk lokasi kendaraan. Contoh: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, }
Berbagai opsi visibilitas	Kriteria visibilitas	Panduan
	Lokasi kendaraan terlihat	Hal ini hanya terjadi jika kedua opsi visibilitas polyline dan lokasi kendaraan terpenuhi. Contoh: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } Dalam contoh ini, lokasi kendaraan hanya terlihat jika jumlah perhentian yang tersisa minimal 3 DAN jarak mengemudi yang tersisa minimal 3.000 meter.

Menonaktifkan penyesuaian otomatis

Anda dapat menghentikan peta agar tidak otomatis menyesuaikan area pandang dengan kendaraan dan rute yang diperkirakan dengan menonaktifkan penyesuaian 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,
  ...
});

Langkah berikutnya

• Menyesuaikan penanda
• Menyesuaikan polyline