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,

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

Dostosuj 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 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 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 JourneySharingMapView podaj mapId i dowolny inny 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 też dostosować, 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 pojazdem.
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ł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ż 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ładzone na trasie na nigdy niewidoczne.
Opcja widoczności może być dowolna:
  • liczba pozostałych przystanków
  • czas do ETA
  • pozostały dystans do przejechania

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 długość pozostałej jazdy 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. W tym przykładzie pokazujemy, 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,
  ...
});

Co dalej?