Dengan menggunakan Consumer SDK, Anda dapat menerapkan penanda kustom dan mengarahkan polyline ke desain aplikasi Anda. Elemen desain ini memungkinkan Konsumen untuk menampilkan pratinjau dinamis rute kendaraan.
Panduan ini menjelaskan opsi yang disediakan SDK dalam
consumerMapStyleCoordinator
. Properti ini tersedia melalui
class GMTCMapView
. Ini hanya mencakup elemen UI, dan mengasumsikan Anda memiliki
aplikasi Konsumen yang fungsional. Untuk mengetahui informasi tentang penyiapan backend
yang dibutuhkan oleh SDK Konsumen, lihat
Mulai Menggunakan Fleet Engine.
Melakukan inisialisasi opsi penyesuaian UI
Callback yang direkomendasikan yang digunakan untuk menetapkan opsi penyesuaian UI terlebih dahulu
dideklarasikan dalam GMTCMapViewDelegate
. mapViewDidInitialize
callback akan dipicu saat objek GMTCMapView
siap merender peta.
Koordinator gaya diinisialisasi, tetapi tidak ada elemen UI.
Swift
/** ViewController.swift */
class ViewController: UIViewController, GMTCMapViewDelegate {
// MARK: - GMTCMapViewDelegate
func mapViewDidInitialize(_ mapview: GMTCMapView) {
// Set the UI customization options here.
}
}
Objective-C
/** ViewController.m */
@interface ViewController () <GMTCMapViewDelegate>
#pragma mark GMTCMapViewDelegate
- (void)mapViewDidInitialize:(GMTCMapView *)mapview {
// Set the UI customization options here.
}
Penanda kustom
Contoh berikut menggunakan GMTCMapView
untuk menyesuaikan gaya penanda.
Untuk menetapkan jenis penanda dan propertinya, gunakan
setMarkerStyleOptions(_:markerType:)
. Opsi penanda kustom Anda mengganti
nilai default yang disediakan oleh Consumer SDK.
Swift
/** ViewController.swift */
private func changeMarkerStyle(
markerStyleOptions: GMTCMarkerStyleOptions?,
markerType: GMTCCustomizableMarkerType
) {
let styleCoordinator = mapView.consumerMapStyleCoordinator
styleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: markerType)
}
/** To restore the default values, call setMarkerStyleOptions(_:markerType:) using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */
private func retrieveMarkerStyle(markerType: GMTCCustomizableMarkerType) {
let styleCoordinator = mapView.consumerMapStyleCoordinator
// The 'markerStyleOptions' contains the stored style options for this marker type.
let markerStyleOptions = styleCoordinator.markerStyleOptions(for: markerType)
}
Objective-C
/** ViewController.h */
- (void)changeMarkerStyle:(nullable GMTCMarkerStyleOptions *)markerStyleOptions
markerType:(GMTCCustomizableMarkerType)markerType {
GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
[styleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:markerType];
}
/** To restore the default values, call setMarkerStyleOptions:markerStyleOptions:markerType: using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */
- (void)retrieveMarkerStyle:(GMTCCustomizableMarkerType)markerType {
GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
// The 'markerStyleOptions' contains the stored style options for this marker type.
GMTCMarkerStyleOptions *markerStyleOptions = [styleCoordinator markerStyleOptionsForType:markerType];
}
Jenis penanda
Penanda berikut tersedia untuk penyesuaian:
GMTCCustomizableMarkerType.unknown
GMTCCustomizableMarkerType.tripPickupPoint
GMTCCustomizableMarkerType.tripDropoffPoint
GMTCCustomizableMarkerType.tripVehicle
GMTCCustomizableMarkerType.intermediateDestination
Gunakan GMTCCustomizableMarkerType.tripPickupPoint
, GMTCCustomizableMarkerType.intermediateDestination
,
dan GMTCCustomizableMarkerType.tripDropoffPoint
untuk menyesuaikan titik jalan selama
Progres Perjalanan dan Pesanan.
Gunakan GMTCCustomizableMarkerType.tripVehicle
untuk menyesuaikan ikon kendaraan
selama Perjalanan dan Progres Pesanan. Ikon penanda tidak berubah
sesuai dengan jenis kendaraan
sebenarnya untuk perjalanan tersebut.
Opsi penanda
Properti yang dapat disesuaikan yang tersedia untuk setiap penanda adalah subset dari
properti yang disediakan oleh Google Maps
MarkerOptions
SDK Konsumen
GMTCMarkerStyleOptions
dibangun menggunakan penginisialisasi, dan tidak dapat diubah setelah dibangun. Nilai default
disediakan untuk setiap properti, jadi hanya nilai kustom yang perlu ditentukan.
Properti berikut tersedia untuk penyesuaian:
groundAnchor
isVisible
iconView
icon
zIndex
isFlat
Menetapkan isVisible
ke salah (false) sama dengan "menonaktifkan" penanda.
Data yang cukup harus diberikan agar Anda dapat menggunakan elemen UI Anda sendiri sebagai penggantinya.
Contoh
Swift
/** MapViewController.swift */
private func updateMarkerUIOptions() {
// Get the GMTCConsumerMapStyleCoordinator
let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator
// The marker type that you would like to set custom UI options for.
let customizableMarkerType = GMTCCustomizableMarkerType.tripVehicle
// Initializing marker options.
let markerStyleOptions = GMTCMutableMarkerStyleOptions()
markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
markerStyleOptions.icon = icon
markerStyleOptions.zIndex = 100
markerStyleOptions.isFlat = false
markerStyleOptions.isVisible = true
consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: customizableMarkerType)
// Reset marker options to default values.
consumerMapStyleCoordinator.setMarkerStyleOptions(nil, markerType: customizableMarkerType)
}
Objective-C
/** MapViewController.m */
- (void)updateMarkerUIOptions {
// Get the GMTCConsumerMapStyleCoordinator
GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];
// The marker type that you would like to set custom UI options for.
GMTCCustomizableMarkerType customizableMarkerType = GMTCCustomizableMarkerTypeTripVehicle;
// Initializing marker options.
GMTCMutableMarkerStyleOptions *markerStyleOptions =
[[GMTCMutableMarkerStyleOptions alloc] init];
markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
markerStyleOptions.icon = icon;
markerStyleOptions.zIndex = 100;
markerStyleOptions.isFlat = NO;
markerStyleOptions.isVisible = YES;
[consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:customizableMarkerType];
// Reset marker options to default values.
[consumerMapStyleCoordinator setMarkerStyleOptions:nil markerType:customizableMarkerType];
}
Pembaruan PWT dinamis untuk penanda pengambilan
Untuk membuat penanda pengambilan yang secara dinamis menampilkan PWT yang diperbarui secara berkala,
perbarui opsi gaya penanda untuk GMTCCustomizableMarkerType.tripPickupPoint
.
Contoh
Swift
/** MapViewController.swift */
/// Updates the ETA every minute by creating a Timer that repeats every minute.
private func schedulePickupMarkerStyleUpdates() {
Timer.scheduledTimer(
timeInterval: 60.0, // Update marker ETA every minute.
target: self,
selector: #selector(updatePickupMarkerETA),
userInfo: nil,
repeats: true)
}
/// Updates the marker options for GMTCCustomizableMarkerType.tripPickupPoint for the current time.
@objc private func updatePickupMarkerETA() {
let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator
let previousOptions = consumerMapStyleCoordinator.markerStyleOptions(for: .tripPickupPoint)
// Get updated ETA icon.
let updatedETAIcon = pickupIconForCurrentTime()
let markerStyleOptions = GMTCMutableMarkerStyleOptions()
markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
markerStyleOptions.icon = updatedETAIcon
markerStyleOptions.zIndex = 100
markerStyleOptions.isFlat = false
markerStyleOptions.isVisible = true
consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: .tripPickupPoint)
}
Objective-C
/** MapViewController.m */
/** Updates the ETA every minute by creating an NSTimer that repeats every minute. */
- (void)schedulePickupMarkerStyleUpdates {
[NSTimer scheduledTimerWithTimeInterval:60.0 // Update marker ETA every minute.
target:self
selector:@selector(updatePickupMarkerETA)
userInfo:nil
repeats:YES];
}
/** Updates the marker options for GMTCCustomizableMarkerTypeTripPickupPoint for the current time. */
- (void)updatePickupMarkerETA {
GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];
GMTCMarkerStyleOptions *previousOptions = [consumerMapStyleCoordinator markerStyleOptionsForType:GMTCCustomizableMarkerTypeTripPickupPoint];
// Get updated ETA icon.
UIImage *updatedETAIcon = [self pickupIconForCurrentTime];
GMTCMutableMarkerStyleOptions *markerStyleOptions =
[[GMTCMutableMarkerStyleOptions alloc] init];
markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
markerStyleOptions.icon = updatedETAIcon;
markerStyleOptions.zIndex = 100;
markerStyleOptions.isFlat = NO;
markerStyleOptions.isVisible = YES;
[consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:GMTCCustomizableMarkerTypeTripPickupPoint];
}
Polyline kustom
Penyesuaian polyline disetel menggunakan
GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:)
.
Contoh berikut menunjukkan cara menetapkan opsi gaya polyline:
Swift
/** ViewController.swift */
private func changePolylineStyleOptions(
polylineStyleOptions: GMTCPolylineStyleOptions?,
polylineType: GMTCPolylineType
) {
let styleCoordinator = mapView.consumerMapStyleCoordinator
styleCoordinator.setPolylineStyleOptions(polylineStyleOptions, polylineType: polylineType)
}
/* Setting custom polyline options will override the default values provided by the Consumer SDK.
The default values can be restored by calling setPolylineStyleOptions(_:polylineType:) with nil for the GMTCPolylineStyleOptions.
The active GMTCPolylineStyleOptions can be retrieved via */
private func retrievePolylineStyleOptions(for polylineType: GMTCPolylineType) {
let styleCoordinator = mapView.consumerMapStyleCoordinator
// The 'polylineStyleOptions' contains the stored style options for this polyline type.
let polylineStyleOptions = styleCoordinator.polylineStyleOptions(for: polylineType)
}
Objective-C
/** ViewController.h */
- (void)changePolylineStyleOptions:(nullable GMTCPolylineStyleOptions *)polylineStyleOptions
polylineType:(GMTCPolylineType)polylineType {
GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
[styleCoordinator setPolylineStyleOptions:polylineStyleOptions polylineType:polylineType];
}
/* Setting custom polyline options will override the default values provided by the Consumer SDK.
The default values can be restored by calling setPolylineStyleOptions:polylineType: with nil for the GMTCPolylineStyleOptions.
The active GMTCPolylineStyleOptions can be retrieved via */
- (void)retrievePolylineStyleOptionsForType:(GMTCPolylineType)polylineType {
GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
// The 'polylineStyleOptions' contains the stored style options for this polyline type.
GMTCPolylineStyleOptions *polylineStyleOptions = [styleCoordinator polylineStyleOptionsForType:polylineType];
}
Jenis polyline
Jenis polyline berikut tersedia untuk penyesuaian:
GMTCPolylineType.activeRoute
GMTCPolylineType.remainingRoute
GMTCPolylineType.activeRoute
dan GMTCPolylineType.remainingRoute
ditampilkan
di sepanjang Progres Perjalanan dan Pesanan. GMTCPolylineType.activeRoute
adalah rute yang dilalui kendaraan ke titik berikutnya, baik itu
penjemputan atau pengantaran. GMTCPolylineType.remainingRoute
adalah segmen
dari perjalanan yang tersisa setelah kendaraan menyelesaikan GMTCPolylineType.activeRoute
.
Properti polyline
Properti yang dapat disesuaikan yang tersedia untuk setiap polyline adalah subset dari
properti yang disediakan di Google Maps
PolylineOptions
SDK Konsumen
GMTCPolylineStyleOptions
dibangun menggunakan penginisialisasi. Aturan tersebut dapat tidak dapat diubah atau dapat diubah jika Anda mau
untuk memberikan nilai kustom untuk properti apa pun. Nilai default
disediakan untuk setiap properti.
Properti berikut tersedia untuk penyesuaian:
color
width
isVisible
isTrafficEnabled
Menetapkan isVisible
ke false
sama dengan menonaktifkan polyline.
Secara default, isTrafficEnabled
disetel ke false
.
Contoh
Swift
/** MapViewController.swift */
private func updatePolylineUIOptions() {
// Get the GMTCConsumerMapStyleCoordinator
let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator
// The polyline type that you would like to set custom UI options for.
let customizablePolylineType = GMTCPolylineType.activeRoute
// Initializing polyline options with default values (immutable version).
let polylineStyleOptions = GMTCPolylineStyleOptions()
consumerMapStyleCoordinator.setPolylineStyleOptions(
polylineStyleOptions, polylineType: customizablePolylineType)
// Initializing polyline options with custom values (mutable version).
let mutablePolylineStyleOptions = GMTCMutablePolylineStyleOptions()
mutablePolylineStyleOptions.isVisible = true
mutablePolylineStyleOptions.isTrafficEnabled = true
mutablePolylineStyleOptions.setTrafficColorFor(.slow, color: .yellow)
mutablePolylineStyleOptions.setTrafficColorFor(.trafficJam, color: .purple)
consumerMapStyleCoordinator.setPolylineStyleOptions(
mutablePolylineStyleOptions, polylineType: customizablePolylineType)
// Reset polyline options to default values.
consumerMapStyleCoordinator.setPolylineStyleOptions(
nil, polylineType: customizablePolylineType)
}
Objective-C
/** MapViewController.m */
- (void)updatePolylineUIOptions {
// Get the GMTCConsumerMapStyleCoordinator
GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];
// The polyline type that you would like to set custom UI options for.
GMTCPolylineType customizablePolylineType = GMTCPolylineTypeActiveRoute;
// Initializing polyline options with default values (immutable version).
GMTCPolylineStyleOptions *polylineStyleOptions = [[GMTCPolylineStyleOptions alloc] init];
[consumerMapStyleCoordinator setPolylineStyleOptions:polylineStyleOptions
polylineType:customizablePolylineType];
// Initializing polyline options with custom values (mutable version).
GMTCMutablePolylineStyleOptions *mutablePolylineStyleOptions = [[GMTCMutablePolylineStyleOptions alloc] init];
mutablePolylineStyleOptions.isVisible = YES;
mutablePolylineStyleOptions.isTrafficEnabled = YES;
[mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeSlow color:[UIColor yellowColor]];
[mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeTrafficJam color:[UIColor purpleColor]];
[consumerMapStyleCoordinator setPolylineStyleOptions:mutablePolylineStyleOptions
polylineType:customizablePolylineType];
// Reset polyline options to default values.
[consumerMapStyleCoordinator setPolylineStyleOptions:nil
polylineType:customizablePolylineType];
}
Polyline berbasis traffic
Lapisan lalu lintas polyline dinonaktifkan secara default. Saat diaktifkan
dengan polylineStyleOptions.isTrafficEnabled = true
, segmen yang mewakili
jalur lalu lintas yang tidak normal akan digambar sebagai rute.
Kondisi lalu lintas direpresentasikan sebagai salah satu dari empat kecepatan: GMTSSpeedType.noData
,
GMTSSpeedType.normal
, GMTSSpeedType.slow
, dan GMTSSpeedType.trafficJam
.
Warna yang mewakili masing-masing klasifikasi kecepatan tersebut dapat disesuaikan
dengan setTrafficColorFor(_:color:)
.