Karte gestalten

In diesem Dokument wird beschrieben, wie Sie das Design einer Karte und eines Steuerelements anpassen können. für die Sichtbarkeit von Daten und den Darstellungsbereich. Sie haben dazu folgende Möglichkeiten:

• Cloudbasierte Kartenstile verwenden
• Kartenstiloptionen direkt im eigenen Code festlegen

Funktionen zum cloudbasierten Gestalten von Karteninhalten verwenden

Erscheinungsbild der Google Maps-Komponente mithilfe cloudbasierter Karten anpassen Stile. Sie können Kartenstile in der Google Cloud Console für alle Ihre Apps erstellen und bearbeiten, in denen Google Maps verwendet wird. Dazu sind keine Änderungen am Code erforderlich. Weitere Informationen finden Sie unter Cloudbasiertes Gestalten von Karteninhalten

Sowohl die Klasse ConsumerMapView als auch die Klasse ConsumerMapFragment unterstützen das cloudbasierte Gestalten von Karteninhalten. Damit Sie die Funktionen für das cloudbasierte Gestalten von Karteninhalten verwenden können, muss LATEST als Karten-Renderer ausgewählt sein. In den folgenden Abschnitten finden Sie Beispiele cloudbasiertes Gestalten von Karteninhalten.

ConsumerMapView

Wenn Sie das cloudbasierte Gestalten von Karteninhalten in ConsumerMapView verwenden möchten, legen Sie den Parameter mapId-Feld auf GoogleMapOptions und übergeben Sie GoogleMapOptions an getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) oder getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Beispiel

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

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

Es gibt zwei Möglichkeiten, cloudbasierte Kartenstile in ConsumerMapFragments zu verwenden:

• Statisch mit der XML-Datei
• Dynamisch mit newInstance

Statisch in der XML-Datei

Wenn Sie cloudbasiertes Gestalten von Karteninhalten mit der XML-Datei in ConsumerMapFragment verwenden möchten, fügen Sie das XML-Attribut map:mapId mit der angegebenen mapId hinzu. Sehen Sie sich folgendes Beispiel an:

<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"/>

Dynamisch mit newInstance

Wenn Sie cloudbasierte Kartenstile mit newInstance in ConsumerMapFragment verwenden möchten, legen Sie das Feld mapId auf GoogleMapOptions fest und übergeben Sie GoogleMapOptions an newInstance. Sehen Sie sich folgendes Beispiel an:

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;
  }
}

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
  }
}

Wenn Sie einen Kartenstil auf Ihre JavaScript-Karte für die Weitergabe von Kaufentscheidungen anwenden möchten, geben Sie beim Erstellen der JourneySharingMapView eine mapId und eine beliebige andere mapOptions an.

In den folgenden Beispielen wird gezeigt, wie Sie einen Kartenstil mit einer Karten-ID anwenden.

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Karten direkt in Ihrem Code stylen

Sie können Kartenstile auch anpassen, indem Sie beim Erstellen der Karte die Kartenoptionen festlegen. JourneySharingMapView In den folgenden Beispielen wird gezeigt, wie Sie eine Karte mithilfe von Kartenoptionen gestalten. Weitere Informationen zu den verfügbaren Kartenoptionen finden Sie in der Google Maps JavaScript API-Referenz unter mapOptions.

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Sichtbarkeit von Aufgabendaten für das SDK steuern

Sie können die Sichtbarkeit bestimmter Aufgabenobjekte auf der Karte mithilfe von Sichtbarkeitsregeln fest.

Standardsichtbarkeit der Aufgabendaten

Standardmäßig sind Daten für einem Fahrzeug zugewiesene Aufgaben sichtbar, wenn sich das Fahrzeug innerhalb von 5 Haltestellen von der Aufgabe befindet. Die Sichtbarkeit endet, wenn die Aufgabe abgeschlossen oder abgebrochen wurde.

Diese Tabelle zeigt die Standardsichtbarkeit für jeden Aufgabentyp. Sie können die Sichtbarkeit für viele, aber nicht für alle Aufgaben anpassen. Weitere Informationen zur Aufgabe finden Sie unter Aufgabentypen im Leitfaden Geplante Aufgaben.

Sichtbarkeit offener Fahrzeugaufgaben anpassen

Die TaskTrackingInfo-Oberfläche bietet eine Reihe von Aufgabendatenelementen die mit dem Consumer SDK sichtbar gemacht werden können.

Sichtbarkeitsoptionen pro Aufgabe

Sie können die Sichtbarkeitskonfiguration pro Aufgabe anpassen, indem Sie beim Erstellen oder Aktualisieren einer Aufgabe in der Fleet Engine die TaskTrackingViewConfig festlegen. Verwenden Sie die folgenden Sichtbarkeitsoptionen, um Kriterien für Sichtbarkeit eines Aufgabenelements festlegen:

Angenommen, bei einer Beispielanpassung wird die Sichtbarkeit für drei Datenelemente anhand der in der folgenden Tabelle aufgeführten Kriterien angepasst. Für alle anderen Elemente gelten die Standardregeln für die Sichtbarkeit.

Das folgende Beispiel zeigt diese Konfiguration:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Regeln für die Sichtbarkeit von Routenpolylinien und Fahrzeugstandorten

Polylinien für Routen können nur angezeigt werden, wenn auch der Fahrzeugstandort sichtbar ist. Andernfalls kann der Fahrzeugstandort anhand des Endes einer Polylinie ermittelt werden.

Anhand dieser Richtlinien können Sie eine gültige Kombination für Routen erstellen. Polylinien und Fahrzeugstandorten angezeigt werden.

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

Automatische Anpassung deaktivieren

Sie können verhindern, dass der Darstellungsbereich der Karte automatisch an das Fahrzeug und die voraussichtliche Route angepasst wird, indem Sie die automatische Anpassung deaktivieren. Im folgenden Beispiel zeigt, wie Sie die automatische Anpassung beim Konfigurieren der Freigabe der Reise deaktivieren Kartenansicht.

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Nächste Schritte

• Markierungen anpassen
• Polylinien anpassen