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. Dazu haben Sie folgende Möglichkeiten:
- Cloudbasiertes Gestalten von Karteninhalten verwenden
- Kartenstiloptionen direkt im eigenen Code festlegen
Funktionen zum cloudbasierten Gestalten von Karteninhalten verwenden
Erscheinungsbild der Google Maps-Komponente mithilfe cloudbasierter Karten anpassen Stile. In der Google Cloud Console können Sie Kartenstile für alle Ihrer Apps, die Google Maps verwenden, ohne dass Sie Änderungen an Ihrem Code vornehmen müssen. Weitere Informationen finden Sie unter Cloudbasiertes Gestalten von Karteninhalten
Sowohl die
ConsumerMapView
und die
ConsumerMapFragment
-Klassen unterstützen das cloudbasierte Gestalten von Karteninhalten.
Wenn Sie das cloudbasierte Gestalten von Karteninhalten verwenden möchten, müssen die ausgewählten Karten
Renderer ist LATEST
. 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)
or 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 zu nutzen: ConsumerMapFragments:
- Statisch mit der XML-Datei.
- Dynamisch mit
newInstance
.
Statisch mit XML
Wenn Sie das cloudbasierte Gestalten von Karteninhalten mit dem XML-Code in der
ConsumerMapFragment
, fügen Sie das XML-Attribut map:mapId
mit dem angegebenen Wert
mapId
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
So verwenden Sie das cloudbasierte Gestalten von Karteninhalten mit newInstance
in
ConsumerMapFragment
, legen Sie das Feld mapId
auf GoogleMapOptions
fest und übergeben Sie den
GoogleMapOptions
bis 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
}
}
Um einen Kartenstil auf Ihre JavaScript-Karte zum Teilen des Kaufprozesses anzuwenden, geben Sie
mapId
und
alle anderen
mapOptions
wenn Sie die JourneySharingMapView
erstellen.
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 Kartenstile auch anpassen, indem Sie beim Erstellen der Karte die Kartenoptionen festlegen.
JourneySharingMapView
Die folgenden Beispiele zeigen, wie Sie mithilfe von
Kartenoptionen. Weitere Informationen dazu, welche Kartenoptionen Sie festlegen können, finden Sie unter
mapOptions
in der Google Maps JavaScript API-Referenz.
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
Sie können die Sichtbarkeit bestimmter Aufgabenobjekte auf der Karte mithilfe von Sichtbarkeitsregeln fest.
Standardsichtbarkeit der Aufgabendaten
Standardmäßig sind Daten für Aufgaben, die einem Fahrzeug zugewiesen sind, sichtbar, wenn das nicht mehr als 5 Haltestellen von der Aufgabe entfernt ist. 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.
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 eine andere Haltestelle enthält, wird diese aber nicht angezeigt. wenn sie nur nicht verfügbare Aufgaben enthält. Geschätzte Ankunftszeit und die geschätzte Fertigstellungszeit der Aufgabe für die Lieferung weiterhin angezeigt wird, die Aufgabe selbst. |
Fahrzeugaufgaben öffnen | Sichtbar | Ja | Die Sichtbarkeit endet, wenn die Aufgabe abgeschlossen oder abgebrochen wird. Sie können die Sichtbarkeit offener Fahrzeugaufgaben anpassen. Weitere Informationen finden Sie unter Passen Sie die Sichtbarkeit offener Fahrzeugaufgaben. |
Aufgaben in geschlossenen Fahrzeugen | Nicht sichtbar | Nein | Die Sichtbarkeit von Aufgaben für geschlossene Fahrzeuge kann nicht angepasst werden. |
Sichtbarkeit offener Fahrzeugaufgaben anpassen
Die TaskTrackingInfo
-Oberfläche 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 zur Aufgabe Anzahl der verbleibenden Haltestellen Fahrzeugstandort |
Sichtbarkeitsoptionen pro Aufgabe
Sie können die Sichtbarkeitskonfiguration für einzelne Aufgaben anpassen, indem Sie
TaskTrackingViewConfig
beim Erstellen oder Aktualisieren einer Aufgabe in
Fleet Engine Verwenden Sie die folgenden Sichtbarkeitsoptionen, um Kriterien für
Sichtbarkeit eines Aufgabenelements festlegen:
Sichtbarkeitsoptionen | ||
---|---|---|
Anzahl der verbleibenden Haltestellen Reisedauer bis zur voraussichtlichen Ankunftszeit Verbleibende Fahrstrecke |
Immer sichtbar Nie sichtbar |
Angenommen, bei einer Beispielanpassung wird die Sichtbarkeit von drei mithilfe der Kriterien in der folgenden Tabelle. Alle anderen -Elementen die Standardregeln für die Sichtbarkeit.
Anpassbares Datenelement | Sichtbarkeit | Kriterium |
---|---|---|
Polylinie der Route | Anzeigen | Die Fahrt mit dem Fahrzeug darf maximal 3 Haltestellen dauern. |
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
}
}
Polylinien für Routen und Sichtbarkeitsregeln für Fahrzeugstandorte
Polylinien für Routen sind nur sichtbar, wenn der Fahrzeugstandort ebenfalls visible; Andernfalls kann der Fahrzeugstandort am Ende eines Polylinie.
<ph type="x-smartling-placeholder">Anhand dieser Richtlinien können Sie eine gültige Kombination für Routen erstellen. Polylinien und Fahrzeugstandorten angezeigt werden.
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. | Setzen Sie Polylinien für Routen auf nie sichtbar. | |
Die Sichtbarkeitsoption ist eine der folgenden:
<ph type="x-smartling-placeholder">
|
Legen Sie als Wert für die Polylinienoptionen für die Route einen Wert fest, der kleiner oder gleich dem festgelegten Wert ist für den Fahrzeugstandort. Beispiel: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, } |
|
Verschiedene Sichtbarkeitsoptionen | Sichtbarkeitskriterien | Anleitung |
Fahrzeugstandort ist sichtbar | Dies geschieht nur, wenn der Fahrzeugstandort und Die Optionen für die Sichtbarkeit von Polylinien sind erfüllt. Beispiel: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } In diesem Beispiel ist der Fahrzeugstandort nur sichtbar, Anzahl der Haltestellen beträgt mindestens 3 UND die verbleibende Fahrt Entfernung mindestens 3.000 Meter beträgt. |
Automatische Anpassung deaktivieren
Sie können verhindern, dass der Darstellungsbereich der Karte automatisch an das Fahrzeug angepasst wird und berechnet die Route, indem Sie die automatische Anpassung deaktivieren. Im folgenden Beispiel zeigt, wie Sie die automatische Anpassung beim Konfigurieren der Freigabe der Reise deaktivieren Kartenansicht.
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,
...
});