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
- Ustawianie opcji stylu mapy bezpośrednio we własnym kodzie
Nadaj mapie styl określania stylów map w chmurze
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: Definiowanie stylów map w Google Cloud
Zarówno
ConsumerMapView
oraz
ConsumerMapFragment
klas obsługują określanie stylów map w chmurze.
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 ConsumerMapView
używać stylu map opartego na chmurze, ustaw atrybut
mapId
w GoogleMapOptions
i przekazać GoogleMapOptions
do
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or 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
Istnieją 2 sposoby nadawania stylów map w chmurze ConsumerMapFragments:
- Statycznie z użyciem pliku XML.
- Dynamicznie z użyciem funkcji
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ć stylu map w chmurze za pomocą usługi newInstance
ConsumerMapFragment
, ustaw pole mapId
w domenie GoogleMapOptions
i przekaż
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 JavaScript, podaj
mapId
i
wszystkie inne
mapOptions
podczas tworzenia JourneySharingMapView
.
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.
});
Stylizowanie map 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
Możesz kontrolować widoczność niektórych obiektów zadań na mapie za pomocą: i reguł widoczności.
Domyślna widoczność danych zadań
Domyślnie dane dotyczące zadań przypisanych do pojazdu są widoczne, gdy pojazd znajduje się w odległości 5 przystanków od zadania. Widoczność kończy się, gdy zadanie jest zakończone lub anulowane.
Ta tabela zawiera domyślną widoczność dla poszczególnych typów zadań. Dostępne opcje można dostosować widoczność wielu zadań, 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 związane z niedostępnością | Niewidoczne | Nie | Służy do robienia przerw kierowcy i tankowania paliwa. Jeśli trasa do zadania dostarczania zawiera też inny przystanek, nie wyświetla się jeśli zawiera tylko zadania dotyczące 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ę po ukończeniu lub anulowaniu zadania. Możesz dostosować widoczność otwartych zadań związanych z pojazdem. Zobacz Dostosuj widoczność otwartych zadań związanych z pojazdem. |
Zamknięte zadania związane z pojazdem | 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ń z możliwością dostosowania | |
---|---|
Wyznacz linie łamane trasy Szacowany czas do przybycia Szacowany czas ukończenia zadania |
Pozostała odległość samochodem do zadania Pozostała liczba zatrzymania Lokalizacja pojazdu |
Opcje widoczności dla poszczególnych zadań
Konfigurację widoczności możesz dostosować dla poszczególnych zadań za pomocą:
TaskTrackingViewConfig
podczas tworzenia lub aktualizowania zadania w aplikacji
Fleet Engine. Użyj następujących opcji widoczności do utworzenia kryteriów, aby:
określanie widoczności elementu zadania:
Opcje widoczności | ||
---|---|---|
Pozostała liczba zatrzymania Czas do szacowanego czasu przyjazdu Pozostały dystans jazdy |
Zawsze widoczne Nigdy niewidoczne |
W ramach przykładu załóżmy, że dostosowanie dostosowuje widoczność dla trzech elementów danych, korzystając z kryteriów podanych w poniższej tabeli. 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 odległość jazdy nie przekracza 5000 m |
Pozostała liczba zatrzymania | Nigdy nie pokazuj | Pojazd znajduje się w odległości 3 przystanków. |
Tę konfigurację znajdziesz w przykładzie poniżej:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Linie łamane trasy i reguły 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ę trasy linii łamanej i opcji widoczności lokalizacji pojazdu.
Takie same opcje widoczności | Kryterium widoczności | Wskazówki |
---|---|---|
Opcje linii łamanych trasy ustawione na zawsze widoczne. | Ustaw lokalizację pojazdu tak, aby była zawsze widoczna. | |
Lokalizacja pojazdu ustawiona na nigdy nie była widoczna. | Ustaw linie łamane trasy tak, aby nigdy nie były widoczne. | |
Dostępne opcje widoczności to:
|
Ustaw opcje linii łamanej trasy na wartość mniejszą lub równą ustawionej wartości do 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łącz automatyczne dopasowanie
Możesz wyłączyć automatyczne dopasowywanie widocznego obszaru do mapy do pojazdu. i przewidywanej trasy, wyłączając automatyczne dopasowanie. 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,
...
});