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
  • 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:
  • liczba pozostałych przystanków
  • czas do szacowanego czasu dotarcia
  • pozostała odległość samochodem

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

Co dalej?