Ta strona została przetłumaczona przez Cloud Translation API.

Określanie stylu mapy

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,

Nadaj mapie styl określania stylów map w chmurze

Dostosuj wygląd i wygląd komponentu map za pomocą definiowania stylów map w Google Cloud. W konsoli Google Cloud możesz tworzyć i edytować style mapy dla wszystkich swoich aplikacji 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 klasy ConsumerMapView, jak i ConsumerMapFragment obsługują styl mapy w chmurze. Aby używać stylu map w chmurze, sprawdź, czy wybrany mechanizm renderowania map to LATEST. Sekcje poniżej pokazują na przykładach, jak używać w projekcie stylu 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 użyciem funkcji newInstance.

Statycznie za pomocą pliku XML

Aby używać w 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 `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 klientów w języku JavaScript, podczas tworzenia elementu JourneySharingMapView podaj mapId i dowolne inne elementy 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

Styl mapy możesz również dostosować, ustawiając opcje mapy podczas tworzenia JourneySharingMapView. Przykłady poniżej pokazują, jak nadać mapie styl za pomocą opcji mapy. Więcej informacji o dostępnych opcjach mapy znajdziesz na stronie 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

Widoczność określonych obiektów zadań na mapie możesz kontrolować za pomocą 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 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 robienia przerw kierowcy i tankowania paliwa. Jeśli trasa do zadania dostawy obejmuje też inny przystanek dla pojazdu, przystanek nie jest wyświetlany, jeśli zawiera tylko zadania związane z niedostępnością. Dla samego zadania dostawy nadal będą wyświetlane szacowany czas przybycia i szacowany czas ukończenia 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 dostosowywać widoczności zadań dotyczących zamkniętych pojazdów.

Dostosuj widoczność otwartych zadań w pojeździe

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ć
Wyznacz linie łamane trasy Szacowany czas do przybycia Szacowany czas ukończenia zadania	Pozostała odległość do przejechania do miejsca wykonania zadania Pozostała liczba zatrzymania Lokalizacja pojazdu

Elementy danych zadań, które można dostosować

Wyznacz linie łamane trasy

Szacowany czas do przybycia

Szacowany czas ukończenia zadania

Pozostała odległość do przejechania do miejsca wykonania zadania

Pozostała liczba zatrzymania

Lokalizacja pojazdu

Opcje widoczności dla poszczególnych zadań

Konfigurację widoczności możesz dostosować dla poszczególnych zadań, ustawiając TaskTrackingViewConfig podczas tworzenia lub aktualizowania zadania we Fleet Engine. Do tworzenia kryteriów służących do określania widoczności elementu zadania możesz używać tych opcji widoczności:

Opcje widoczności
Pozostały licznik przystanków Czas do szacowanego czasu przyjazdu Pozostały dystans jazdy	Zawsze widoczne Nigdy niewidoczne

Opcje widoczności

Pozostały licznik przystanków

Czas do szacowanego czasu przyjazdu

Pozostały dystans jazdy

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 elementy są widoczne zgodnie z domyślnymi zasadami 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 samochodem nie przekracza 5000 metrów.
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 brzegowe tras i reguły dotyczące widoczności lokalizacji pojazdu

Linie łamane na trasie nie są widoczne, jeśli nie jest też widoczna lokalizacja pojazdu. W przeciwnym razie można ją określić na podstawie linii łamanej.

Te wskazówki pomogą Ci podać prawidłową kombinację opcji widoczności ścieżki wieloliniowej i lokalizacji pojazdu.

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 była widoczna.	Ustaw linie łamane trasy tak, aby nigdy nie były widoczne.
	Dostępne opcje widoczności to: liczba pozostałych przystanków czas do szacowanego czasu dotarcia pozostała odległość samochodem	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
Różne opcje widoczności	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 ORAZ pozostała odległość pojazdu to co najmniej 3000 metrów.

Wyłącz automatyczne dopasowanie

Możesz wyłączyć automatyczne dopasowywanie widoku do pojazdu i przewidywanej trasy, wyłączając automatyczne dopasowywanie. Z przykładu poniżej dowiesz się, jak wyłączyć automatyczne dopasowanie podczas konfigurowania widoku mapy udostępniania podróży.

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

Określanie stylu mapy

Nadaj mapie styl określania stylów map w chmurze

ConsumerMapView

Przykład

Java

Kotlin

ConsumerMapFragment

Statycznie za pomocą pliku XML

Dynamicznie z newInstance

Java

Kotlin

JavaScript

TypeScript

Nadawanie mapom stylu bezpośrednio w kodzie

JavaScript

TypeScript

Kontroluj widoczność danych zadań dla pakietu SDK

Domyślna widoczność danych zadań

Dostosuj widoczność otwartych zadań w pojeździe

Opcje widoczności dla poszczególnych zadań

Linie brzegowe tras i reguły dotyczące widoczności lokalizacji pojazdu

Wyłącz automatyczne dopasowanie

JavaScript

TypeScript

Co dalej?

`ConsumerMapView`

`ConsumerMapFragment`

Dynamicznie z `newInstance`