In diesem Leitfaden wird beschrieben, wie Sie die Karte gestalten können, die während einer Fahrt in Ihrer iOS-App angezeigt wird.
Hinweis
Bevor Sie eine Karte stilisieren können, benötigen Sie eine Verbraucher-App mit den folgenden Funktionen:
Eine Kartenansicht. Weitere Informationen finden Sie unter Kartenansicht initialisieren.
Eine Möglichkeit, Kartenansichtsereignisse zu verarbeiten. Ereignisse in der Kartenansicht verarbeiten
Außerdem müssen Sie die Back-End-Dienste eingerichtet haben, die das Consumer SDK benötigt, und das Consumer SDK einrichten. Weitere Informationen finden Sie unter Consumer SDK einrichten und Was ist Fleet Engine?.
Kartenanpassungen
Folgende Anpassungen sind verfügbar:
Karte gestalten: Mithilfe der Funktionen für das cloudbasierte Gestalten von Karteninhalten können Sie Kartenfarben, Polylinien und andere Kartenelemente gestalten. Weitere Informationen finden Sie unter Karte gestalten.
Kamerazoom anpassen: Sie können die integrierte Funktion verwenden oder Ihre eigenen Kameraoptionen festlegen, um sich auf eine Reise zu fokussieren. Weitere Informationen finden Sie unter Kamerazoom anpassen, um den Fokus auf eine Fahrt zu legen.
Markierungen und Polylinien anpassen: Sie können Ihrem App-Design benutzerdefinierte Markierungen und Polylinien für Routen hinzufügen. Mithilfe dieser Designelemente kann in deiner Nutzer-App eine dynamische Vorschau der Route des Fahrzeugs angezeigt werden. Weitere Informationen finden Sie unter Markierungen anpassen und Polylinien anpassen.
Das SDK stellt diese Optionen über das Attribut
consumerMapStyleCoordinator
bereit. Dieses Attribut ist über die KlasseGMTCMapView
verfügbar.
Karte mit cloudbasiertem Gestalten von Karteninhalten stylen
Sie können das Design der Kartenkomponente mithilfe des cloudbasierten Gestaltens von Karteninhalten anpassen. In der Google Cloud Console können Sie Kartenstile für alle Ihre Apps, in denen Google Maps verwendet wird, erstellen und bearbeiten, ohne dass Änderungen am Code erforderlich sind. 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 wird anhand von Beispielen gezeigt, wie Sie cloudbasiertes Gestalten von Karteninhalten für Ihr Projekt nutzen können.
ConsumerMapView
Wenn du in der ConsumerMapView
cloudbasierte Kartenstile verwenden möchtest, setze das Feld mapId
auf GoogleMapOptions
und übergebe die 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 das cloudbasierte Gestalten von Karteninhalten mit dem XML-Code im ConsumerMapFragment
verwenden möchten, fügen Sie das XML-Attribut map:mapId
mit dem 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 das cloudbasierte Gestalten von Karteninhalten 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
}
}
Kamerazoom anpassen, um den Fokus auf eine Fahrt zu legen
Während einer aktiven Fahrtenfreigabe ist es für den Nutzer hilfreich, eine größere Ansicht des Fahrzeugs während der Fahrt zu sehen, anstatt eine Nahaufnahme des Fahrzeugs auf einer Route. Dazu passen Sie den Kamerazoom entweder über die integrierte AutoCamera
oder über die folgenden Einstellungen für das Kameraverhalten an:
AutoCamera
: Wenn SieAutoCamera
verwenden möchten, müssen Sie nichts tun. Die Kamera folgt standardmäßig der Fahrt.Kameraverhalten anpassen: Wenn Sie das Kameraverhalten anpassen möchten, müssen Sie
AutoCamera
deaktivieren und dann Anpassungen vornehmen.
AutoCamera
zentriert die Kamera standardmäßig
Das Consumer SDK bietet eine AutoCamera
-Funktion, die standardmäßig für die integrierte Schaltfläche Mein Standort des Maps SDK aktiviert ist. Die Kamera zoomt heran, um den Fahrtweg und den nächsten Wegpunkt der Fahrt zu fokussieren.
Wenn Sie AutoCamera
verwenden möchten, muss es aktiviert sein. Weitere Informationen finden Sie unter allowCameraAutoUpdate
.
Weitere Informationen zur Schaltfläche Mein Standort für das Maps SDK finden Sie in der Maps SDK for iOS-Dokumentation unter „Schaltfläche ‚Mein Standort‘“.
Kameraverhalten anpassen
Wenn Sie das Kameraverhalten genauer steuern möchten, können Sie AutoCamera
deaktivieren und das Kameraverhalten anpassen.
Deaktivieren oder aktivieren Sie AutoCamera
mit dem Attribut AllowCameraAutoUpdate
.
Weitere Informationen zur Kameraanpassung finden Sie in der Maps SDK for iOS-Dokumentation unter Kamera bewegen.