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

Określanie stylu mapy

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

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

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: liczba pozostałych przystanków czas do szacowanego czasu dotarcia pozostała odległość samochodem	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
Różne opcje widoczności	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,
  ...
});

Określanie stylu mapy

nadawanie mapie stylów za pomocą definiowania stylów map w Google Cloud;

ConsumerMapView

Przykład

Java

Kotlin

ConsumerMapFragment

Statycznie za pomocą pliku XML

Dynamicznie z użyciem newInstance

Java

Kotlin

JavaScript

TypeScript

Nadawanie stylu mapom bezpośrednio w własnym 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łączanie automatycznego dopasowywania

JavaScript

TypeScript

Co dalej?

`ConsumerMapView`

`ConsumerMapFragment`

Dynamicznie z użyciem `newInstance`