Ten dokument opisuje sposób dostosowywania wyglądu i sposobu działania mapy oraz elementów sterujących widoczności danych i opcji widocznego obszaru. Możesz to zrobić na kilka sposobów:
- Używaj stylu mapy w chmurze
- ustawiać opcje stylu mapy bezpośrednio w kodzie,
nadawanie mapie stylów za pomocą definiowania stylów map w Google Cloud;
Dostosuj wygląd i styl komponentu map za pomocą map działających w chmurze stylu. W konsoli Google Cloud możesz tworzyć i edytować style mapy dla dowolnych w aplikacjach korzystających z Map Google bez konieczności wprowadzania zmian w kodzie. Więcej informacji znajdziesz w artykule Definiowanie stylów map w Google Cloud.
Zarówno klasa ConsumerMapView, jak i ConsumerMapFragmentobsługują definiowanie stylów map w Google Cloud.
Aby używać stylu map w chmurze, sprawdź, czy wybrane mapy
mechanizm renderowania to LATEST. W poniższych sekcjach znajdziesz przykłady użycia funkcji
stosować w projekcie stylowanie map w chmurze.
ConsumerMapView
Aby w komponencie ConsumerMapView używać stylów map opartych na chmurze, ustaw pole mapId w komponencie GoogleMapOptions i przekaż obiekt GoogleMapOptions do metody getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions) lub getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions).
Przykład
Java
public class SampleAppActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ConsumerMapView mapView = findViewById(R.id.consumer_map_view);
if (mapView != null) {
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
mapView.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId);
}
}
}
Kotlin
class SampleAppActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
mapView.getConsumerGoogleMapAsync(
object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId)
}
}
ConsumerMapFragment
Z definiowania stylów map w Google Cloud można korzystać na 2 sposoby:
- Statycznie z użyciem pliku XML.
- Dynamicznie z
newInstance.
Statycznie za pomocą pliku XML
Aby użyć opartego na chmurze stylu map z użyciem kodu XML w pliku
ConsumerMapFragment, dodaj atrybut XML map:mapId z określonym
mapId Przyjrzyj się temu przykładowi:
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
android:id="@+id/consumer_map_fragment"
map:mapId="map-id"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Dynamicznie z użyciem newInstance
Aby używać definiowania stylów map w Google Cloud z newInstance w ConsumerMapFragment, ustaw pole mapId na GoogleMapOptions i przekaż wartość GoogleMapOptions do newInstance. Przyjrzyj się temu przykładowi:
Java
public class SampleFragmentJ extends Fragment {
@Override
public View onCreateView(
@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);
getParentFragmentManager()
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit();
consumerMapFragment.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
});
return view;
}
}
Kotlin
class SampleFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?): View? {
val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)
parentFragmentManager
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit()
consumerMapFragment.getConsumerGoogleMapAsync(
object : ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
})
return view
}
}
Aby zastosować styl mapy do mapy udostępniania ścieżki klienta w JavaScript, podczas tworzenia elementu JourneySharingMapView podaj wartość mapId i dowolną inną wartość mapOptions.
Poniższe przykłady pokazują, jak zastosować styl mapy za pomocą identyfikatora mapy.
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.
});
Nadawanie stylu mapom bezpośrednio w własnym kodzie
Styl mapy możesz też dostosować, ustawiając opcje mapy podczas tworzenia JourneySharingMapView. W poniższych przykładach pokazujemy, jak określić styl mapy za pomocą
opcje mapy. Więcej informacji o dostępnych opcjach mapy znajdziesz w artykule
mapOptions
w dokumentacji JavaScript API Map Google.
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" }
]
}
]
}
});
Kontroluj widoczność danych zadań dla pakietu SDK
Za pomocą reguł widoczności możesz kontrolować widoczność niektórych obiektów zadań na mapie.
Domyślna widoczność danych zadań
Domyślnie dane dotyczące zadań przypisanych do pojazdu są widoczne, gdy pojazd znajduje się w odległości do 5 przystanków od zadania. Widoczność kończy się, gdy zadanie jest zakończone lub anulowane.
Ta tabela pokazuje domyślną widoczność dla każdego typu zadania. Widoczność wielu zadań możesz dostosować, ale nie wszystkich. Więcej informacji o zadaniu zapoznaj się z sekcją Typy zadań w przewodniku Zaplanowane zadania.
| Typ zadania | Widoczność domyślna | Można dostosować? | Opis |
|---|---|---|---|
| Zadania dotyczące niedostępności | Niewidoczne | Nie | Służy do przerw dla kierowcy i tankowania. Jeśli trasa do zadania dostawy zawiera także inny przystanek pojazdu, ten przystanek nie jest wyświetlany, jeśli zawiera tylko zadania niedostępności. Szacowany czas przybycia i szacowany czas ukończenia zadań są nadal wyświetlane w przypadku dostawy i zadania. |
| Otwórz zadania w pojeździe | Widoczne | Tak | Widoczność kończy się, gdy zadanie zostanie ukończone lub anulowane. Możesz dostosować widoczność otwartych zadań związanych z pojazdem. Zapoznaj się z sekcją Dostosowywanie widoczności otwartych zadań związanych z pojazdami. |
| Zadania dotyczące zamkniętych pojazdów | Niewidoczne | Nie | Nie możesz dostosować widoczności zadań związanych z zamkniętym pojazdem. |
Dostosuj widoczność otwartych zadań w pojeździe
Interfejs TaskTrackingInfo zawiera szereg elementów danych zadań
które mogą być widoczne za pomocą pakietu Consumer SDK.
| Elementy danych zadań, które można dostosować | |
|---|---|
|
Linie łamane tras Szacowany czas do przybycia Szacowany czas ukończenia zadania |
Pozostała odległość samochodem do zadania Pozostały licznik przystanków Lokalizacja pojazdu |
Opcje widoczności dla poszczególnych zadań
Konfigurację widoczności możesz dostosować indywidualnie dla każdego zadania, ustawiając TaskTrackingViewConfig podczas tworzenia lub aktualizowania zadania w Fleet Engine. Aby utworzyć kryteria określające widoczność elementu zadania, użyj tych opcji widoczności:
| Opcje widoczności | ||
|---|---|---|
|
Pozostała liczba zatrzymania Czas do szacowanego czasu przyjazdu Pozostała odległość do przejechania |
Zawsze widoczne Nigdy niewidoczne |
|
Na przykładzie załóżmy, że przykładowa personalizacja dostosowuje widoczność 3 elementów danych za pomocą kryteriów widocznych w tabeli poniżej. Wszystkie pozostałe mają zgodność z domyślnymi regułami widoczności.
| Element danych do dostosowania | Widoczność | Kryterium |
|---|---|---|
| Linia łamana trasy | Pokaż | Pojazd znajduje się w odległości 3 przystanków. |
| Szacowany czas zakończenia | Pokaż | Pozostała długość trasy dojazdu jest krótsza niż 5000 m |
| Pozostały licznik przystanków | Nigdy nie pokazuj | Samochód znajduje się w odległości 3 przystanków. |
Przykładowa konfiguracja:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Linie brzegowe tras i reguły dotyczące widoczności lokalizacji pojazdu
Linie łamane trasy nie są widoczne, jeśli nie jest również widoczna lokalizacja pojazdu visible; W przeciwnym razie lokalizację pojazdu można określić na podstawie linia łamana.
Te wskazówki pomogą Ci podać prawidłową kombinację opcji widoczności lokalizacji pojazdu i linii przebiegu trasy.
| Takie same opcje widoczności | Kryterium widoczności | Wskazówki |
|---|---|---|
| Opcje ścieżek poliliniowych ustawione na „Zawsze widoczne”. | Ustaw lokalizację pojazdu tak, aby była zawsze widoczna. | |
| Lokalizacja pojazdu ustawiona na nigdy nie widoczna. | Ustaw linie łamane trasy tak, aby nigdy nie były widoczne. | |
Opcja widoczności może być dowolna:
|
Ustaw opcje ścieżki trasy na wartość mniejszą lub równą wartości ustawionej dla lokalizacji pojazdu. Na przykład: "taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"vehicleLocationVisibility": {
"remainingStopCountThreshold": 5
},
}
|
|
| Różne opcje widoczności | Kryteria widoczności | Wskazówki |
| Lokalizacja pojazdu jest widoczna | Dzieje się tak tylko wtedy, gdy zarówno lokalizacja pojazdu, są spełnione opcje widoczności linii łamanej. Na przykład: "taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"vehicleLocationVisibility": {
"remainingDrivingDistanceMetersThreshold": 3000
},
}W tym przykładzie lokalizacja pojazdu jest widoczna tylko wtedy, gdy pozostałe liczba przystanków wynosi co najmniej 3 ORAZ pozostały czas przejazdu odległość to co najmniej 3000 metrów. |
Wyłączanie automatycznego dopasowywania
Możesz wyłączyć automatyczne dopasowywanie widoku do pojazdu i przewidywanej trasy, wyłączając automatyczne dopasowywanie. Przykład poniżej pokazuje, jak wyłączyć automatyczne dopasowanie podczas konfigurowania udostępniania podróży widoku mapy.
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,
...
});