In diesem Dokument erfahren Sie, wie Sie das Erscheinungsbild einer Karte anpassen und die Sichtbarkeit von Daten sowie die Ansichtsoptionen steuern. Dazu haben Sie folgende Möglichkeiten:
- Cloudbasiertes Gestalten von Karteninhalten verwenden
- Optionen für den Kartenstil direkt in Ihrem Code festlegen
Karte mit cloudbasiertem Gestalten von Karteninhalten stylen
Mit dem cloudbasierten Gestalten von Karteninhalten können Sie das Erscheinungsbild der Kartenkomponente anpassen. 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 das cloudbasierte Gestalten von Karteninhalten verwenden können, muss LATEST
als Renderer ausgewählt sein. In den folgenden Abschnitten wird anhand von Beispielen gezeigt, wie Sie cloudbasiertes Gestalten von Karteninhalten für Ihr Projekt nutzen können.
ConsumerMapView
Wenn Sie das cloudbasierte Gestalten von Karteninhalten im ConsumerMapView
verwenden möchten, legen Sie das Feld mapId
auf GoogleMapOptions
fest und übergeben Sie GoogleMapOptions
an getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) oder getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions).
Beispiel
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
Es gibt zwei Möglichkeiten, das cloudbasierte Gestalten von Karteninhalten 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:
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
}
}
Wenn Sie einen Kartenstil auf Ihre JavaScript-Karte für die Freigabe von Fahrten anwenden möchten, geben Sie beim Erstellen der JourneySharingMapView
eine mapId
und eine beliebige andere mapOptions
an.
Die folgenden Beispiele zeigen, wie ein Kartenstil mit einer Karten-ID angewendet wird.
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.
});
Karten direkt in Ihrem eigenen Code gestalten
Sie können das Gestalten von Karteninhalten auch anpassen, indem Sie beim Erstellen der JourneySharingMapView
die Kartenoptionen festlegen. Die folgenden Beispiele zeigen, wie Sie eine Karte mithilfe von Kartenoptionen gestalten. Weitere Informationen dazu, welche Kartenoptionen Sie festlegen können, finden Sie in der Referenz zur Google Maps JavaScript API unter 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" }
]
}
]
}
});
Sichtbarkeit von Aufgabendaten für das SDK steuern
Mit Sichtbarkeitsregeln können Sie festlegen, welche Aufgabenobjekte auf der Karte angezeigt werden.
Standardsichtbarkeit von 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.
In dieser Tabelle sehen Sie die Standardsichtbarkeit für die einzelnen Aufgabentypen. Sie können die Sichtbarkeit für viele, aber nicht alle Aufgaben anpassen. Weitere Informationen zu Aufgabentypen finden Sie im Leitfaden Geplante Aufgaben unter Aufgabentypen.
Aufgabentyp | Standardsichtbarkeit | Anpassbar? | Beschreibung |
---|---|---|---|
Nicht verfügbare Aufgaben | Nicht sichtbar | Nein | Wird für Pausen und beim Tanken verwendet. Wenn eine Route zu einer Lieferaufgabe auch eine andere Fahrzeughaltestelle enthält, wird diese Haltestelle nicht angezeigt, wenn sie nur Aufgaben enthält, die nicht verfügbar sind. Die geschätzte Ankunftszeit und die geschätzte Fertigstellungszeit für die Aufgabe werden weiterhin für die Lieferaufgabe selbst angezeigt. |
Fahrzeugaufgaben öffnen | Sichtbar | Ja | Die Sichtbarkeit endet, wenn die Aufgabe abgeschlossen oder abgebrochen wurde. Sie können die Sichtbarkeit offener Fahrzeugaufgaben anpassen. Weitere Informationen finden Sie unter Sichtbarkeit offener Fahrzeugaufgaben anpassen. |
Aufgaben in geschlossenen Fahrzeugen | Nicht sichtbar | Nein | Sie können die Sichtbarkeit abgeschlossener Fahrzeugaufgaben nicht anpassen. |
Sichtbarkeit offener Fahrzeugaufgaben anpassen
Die TaskTrackingInfo
-Schnittstelle bietet eine Reihe von Aufgabendatenelementen, die mit dem Consumer SDK sichtbar gemacht werden können.
Anpassbare Aufgabendatenelemente | |
---|---|
Polylinien für Routen Geschätzte Ankunftszeit Geschätzte Fertigstellungszeit für Aufgaben |
Verbleibende Fahrstrecke bis zur Aufgabe Anzahl der verbleibenden Haltestellen Fahrzeugstandort |
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. Mit den folgenden Sichtbarkeitsoptionen können Sie Kriterien für die Sichtbarkeit eines Aufgabenelements erstellen:
Optionen für die Sichtbarkeit | ||
---|---|---|
Verbleibende Haltestellen Reisedauer bis zur voraussichtlichen Ankunftszeit Verbleibende Fahrstrecke |
Immer sichtbar Nie sichtbar |
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.
Datenelement, das angepasst werden soll | Sichtbarkeit | Kriterium |
---|---|---|
Polylinie der Route | Anzeigen | Die Fahrt mit dem Fahrzeug darf maximal 3 Stopps erreichen. |
ETA | Anzeigen | Die verbleibende Fahrstrecke ist kürzer als 5.000 Meter. |
Anzahl der verbleibenden Haltestellen | Nie einblenden | Die Fahrt mit dem Fahrzeug darf maximal 3 Haltestellen dauern. |
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 sind nur sichtbar, wenn auch der Fahrzeugstandort sichtbar ist. Andernfalls kann der Fahrzeugstandort aus dem Ende einer Polylinie abgeleitet werden.
Diese Richtlinien helfen Ihnen, eine gültige Kombination für die Sichtbarkeit von Routenpolylinien und Fahrzeugstandorten festzulegen.
Gleiche Sichtbarkeitsoptionen | Sichtbarkeitskriterium | Anleitung |
---|---|---|
Die Optionen für Polylinien für Routen sind auf „Immer sichtbar“ festgelegt. | Legen Sie den Fahrzeugstandort so fest, dass er immer sichtbar ist. | |
Fahrzeugstandort auf „Nie sichtbar“ gesetzt. | Legen Sie fest, dass Routenpolylinien nie sichtbar sein sollen. | |
Die Sichtbarkeitsoption ist eine der folgenden:
|
Legen Sie die Optionen für die Polylinie auf einen Wert fest, der kleiner oder gleich dem Wert ist, der für den Fahrzeugstandort festgelegt ist. Beispiel: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, } |
|
Verschiedene Sichtbarkeitsoptionen | Sichtbarkeitskriterien | Anleitung |
Fahrzeugstandort ist sichtbar | Dies geschieht nur, wenn die Sichtbarkeitsoptionen für den Fahrzeugstandort und die Polylinie sowohl erfüllt sind. Beispiel: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } In diesem Beispiel ist der Fahrzeugstandort nur sichtbar, wenn die verbleibende Anzahl an Haltestellen mindestens 3 UND die verbleibende Fahrstrecke mindestens 3.000 Meter beträgt. |
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. Das folgende Beispiel zeigt, wie Sie die automatische Anpassung deaktivieren, wenn Sie die Kartenansicht mit dem Teilen der Reise konfigurieren.
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,
...
});