In diesem Dokument wird beschrieben, wie Sie das Erscheinungsbild einer Karte anpassen und die Datensichtbarkeit und die Optionen für den Darstellungsbereich steuern. Dazu haben Sie folgende Möglichkeiten:
- Cloudbasiertes Gestalten von Karteninhalten verwenden
- Kartenstiloptionen direkt im eigenen Code festlegen
Karte mit cloudbasiertem Gestalten von Karteninhalten gestalten
Wenn Sie einen Kartenstil auf Ihre JavaScript-Karte für die gemeinsame Nutzung von Fahrten anwenden möchten, geben Sie beim Erstellen von JourneySharingMapView ein mapId und alle anderen mapOptions an.
In den folgenden Beispielen wird gezeigt, wie Sie einen Kartenstil mit einer Karten-ID anwenden.
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 den Kartenstil auch anpassen, indem Sie beim Erstellen der JourneySharingMapView Kartenoptionen festlegen. Die folgenden Beispiele zeigen, wie Sie eine Karte mit Kartenoptionen gestalten. Weitere Informationen zu den Kartenoptionen, die Sie festlegen können, finden Sie in der mapOptions-Referenz zur Google Maps JavaScript API.
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" }
]
}
]
}
});
Informationen auf der Karte anzeigen
Zusätzliche Informationen zu einer Fahrzeug- oder Standortmarkierung mit einem InfoWindow anzeigen Weitere Informationen finden Sie unter InfoWindow.
Im folgenden Beispiel wird gezeigt, wie Sie ein InfoWindow erstellen und an eine Fahrzeugmarkierung anhängen:
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount = e.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
const stopsCount = e.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
Automatische Anpassung deaktivieren
Sie können das automatische Anpassen des Darstellungsbereichs der Karte an das Fahrzeug und die erwartete Route deaktivieren. Das folgende Beispiel zeigt, wie Sie das automatische Anpassen deaktivieren, wenn Sie die Kartenansicht für die Routenfreigabe 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,
...
});