Z tego dokumentu dowiesz się, jak dostosować wygląd i wygląd mapy oraz kontrolować opcje widoczności danych i widoku. Możesz to zrobić na kilka sposobów:
- Definiowanie stylów map w Google Cloud
- ustawiać opcje stylu mapy bezpośrednio w kodzie,
nadawanie mapie stylów za pomocą definiowania stylów map w Google Cloud;
dostosowywać wygląd i wygląd komponentu map za pomocą definiowania stylów map w Google Cloud. Styl mapy możesz tworzyć i edytować w konsoli Google Cloud w przypadku wszystkich aplikacji, które korzystają 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 korzystać z definiowania stylów map w Google Cloud, sprawdź, czy wybrany moduł renderowania map to LATEST. W następnych sekcjach znajdziesz przykłady korzystania z definiowania stylów map w Google Cloud w ramach projektu.
ConsumerMapView
Aby używać stylów map opartych na chmurze w komponencie ConsumerMapView, 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 w pliku XML.
- Dynamicznie z
newInstance.
Statycznie w pliku XML
Aby używać stylów map w chmurze z plikiem XML w pliku ConsumerMapFragment, dodaj atrybut XML map:mapId z określonym atrybutem 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 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 podróży 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 mapom stylu bezpośrednio w kodzie
Możesz też dostosować styl mapy, ustawiając opcje mapy podczas tworzenia JourneySharingMapView. Poniższe przykłady pokazują, jak nadać mapie styl za pomocą opcji mapy. Więcej informacji o opcjach mapy, które możesz ustawić, znajdziesz w dokumentacji interfejsu Maps JavaScript API (mapOptions).
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" }
]
}
]
}
});
Kontrolowanie widoczności danych zadań w pakiecie 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 zostanie ukoń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 typach zadań znajdziesz w artykule Typy zadań w przewodniku Zaplanowane zadania.
| Typ zadania | Widoczność domyślna | Czy można je 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, nie jest on wyświetlany, jeśli zawiera tylko zadania niedostępności. Szacowany czas przybycia i szacowany czas wykonania zadania są nadal wyświetlane w przypadku samego zadania dostawy. |
| Otwieranie zadań związanych z pojazdem | 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 dostosowywać widoczności zadań dotyczących zamkniętych pojazdów. |
Dostosowywanie widoczności otwartych zadań związanych z pojazdem
Interfejs TaskTrackingInfo udostępnia wiele elementów danych zadań, które można wyświetlić za pomocą pakietu Consumer SDK.
| Elementy danych zadań, które można dostosować | |
|---|---|
|
Linie łamane tras Szacowany czas przybycia Szacowany czas ukończenia zadania |
Pozostała odległość do przejechania do miejsca wykonania zadania Pozostały licznik przystanków Lokalizacja pojazdu |
Opcje widoczności 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ły licznik przystanków Czas do szacowanego czasu przyjazdu Pozostała odległość do przejechania |
Zawsze widoczne Nigdy nie widoczne |
|
Na przykładzie załóżmy, że przykładowe dostosowanie zmienia widoczność 3 elementów danych za pomocą kryteriów podanych w tabeli poniżej. Wszystkie pozostałe elementy są widoczne zgodnie z domyślnymi zasadami widoczności.
| Element danych do dostosowania | Widoczność | Kryterium |
|---|---|---|
| Linia łamana trasy | Pokaż | Samochód znajduje się w odległości 3 przystanków. |
| Szacowany czas zakończenia | Pokaż | Pozostała odległość do przejechania jest krótsza niż 5000 metrów. |
| 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
Odcinki trasy nie mogą być widoczne, chyba że widoczna jest też lokalizacja pojazdu. W przeciwnym razie lokalizację pojazdu można ustalić na podstawie końca odcinka.
Te wskazówki pomogą Ci podać prawidłową kombinację opcji widoczności lokalizacji pojazdu i linii trasy.
| Te same opcje widoczności | Kryterium widoczności | Wskazówki |
|---|---|---|
| Opcje ścieżek poliliniowych ustawione na „Zawsze widoczne”. | Ustaw lokalizację pojazdu na „Zawsze widoczna”. | |
| Lokalizacja pojazdu ustawiona na „Nigdy nie pokazuj”. | Ustaw linie wygładzające na trasie na nigdy niewidoczne. | |
Opcja widoczności może być dowolna:
|
Ustaw opcje ścieżki dojazdu 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 spełnione są oba warunki: lokalizacja pojazdu i opcja widoczności polilinii. Na przykład: "taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"vehicleLocationVisibility": {
"remainingDrivingDistanceMetersThreshold": 3000
},
}W tym przykładzie lokalizacja pojazdu jest widoczna tylko wtedy, gdy liczba pozostałych przystanków wynosi co najmniej 3 I odległość do pokonania wynosi 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. Ten przykład pokazuje, jak wyłączyć automatyczne dopasowywanie podczas konfigurowania widoku mapy udostępniania trasy.
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,
...
});