Z tego dokumentu dowiesz się, jak dostosować wygląd i wygląd mapy oraz kontrolować opcje widoczności danych i widoku. Możesz to zrobić na kilka sposobów:
- Definiowanie stylów map w Google Cloud
- ustawiać opcje stylu mapy bezpośrednio w kodzie,
nadawanie mapie stylów za pomocą definiowania stylów map w Google Cloud;
Aby zastosować styl mapy do mapy udostępniania podróży klienta w JavaScript, podczas tworzenia elementu JourneySharingMapView podaj mapId i dowolny inny element mapOptions.
Poniższe przykłady pokazują, jak zastosować styl mapy za pomocą identyfikatora mapy.
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.
});
Nadawanie mapom stylu bezpośrednio w kodzie
Styl mapy możesz też dostosować, ustawiając opcje mapy podczas tworzenia JourneySharingMapView. Poniższe przykłady pokazują, jak nadać mapie styl za pomocą opcji mapy. Więcej informacji o opcjach mapy, które możesz ustawić, znajdziesz w dokumentacji interfejsu Maps JavaScript API (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" }
]
}
]
}
});
Wyświetlanie informacji na mapie
Wyświetl dodatkowe informacje o pojazdach lub znacznikach lokalizacji za pomocą InfoWindow. Więcej informacji znajdziesz w sekcji InfoWindow.
Ten przykład pokazuje, jak utworzyć InfoWindow i dołączyć go do znacznika pojazdu:
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();
Wyłączanie automatycznego dopasowywania
Możesz wyłączyć automatyczne dopasowywanie widoku do pojazdu i przewidywanej trasy, wyłączając automatyczne dopasowywanie. W tym przykładzie pokazujemy, jak wyłączyć automatyczne dopasowywanie podczas konfigurowania widoku mapy udostępniania trasy.
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,
...
});