Określanie stylu mapy

Wybierz platformę: Android iOS JavaScript

Z tego dokumentu dowiesz się, jak dostosować wygląd mapy oraz kontrolować widoczność danych i opcje widoku. Możesz to zrobić na kilka sposobów:

  • Użyj definiowania stylów map w Google Cloud.
  • Ustaw opcje stylu mapy bezpośrednio w kodzie.

Dostosowywanie stylu mapy za pomocą definiowania stylów map w Google Cloud

Aby zastosować styl mapy do mapy udostępniania podróży w JavaScript, podczas tworzenia elementu JourneySharingMapView określ mapId i inne 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.
});

Dostosowywanie stylu mapy bezpośrednio w kodzie

Styl mapy możesz też dostosować, ustawiając opcje mapy podczas tworzenia elementu JourneySharingMapView. Poniższe przykłady pokazują, jak dostosować styl mapy za pomocą opcji mapy. Więcej informacji o tym, jakie opcje mapy możesz ustawić, znajdziesz w sekcji mapOptions w dokumentacji interfejsu 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" }
        ]
      }
    ]
  }
});

Wyświetlanie informacji na mapie

Dodatkowe informacje o pojeździe lub znaczniku lokalizacji możesz wyświetlać za pomocą elementu InfoWindow. Więcej informacji znajdziesz w sekcji InfoWindow.

Poniższy przykład pokazuje, jak utworzyć element 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. Poniższy przykład pokazuje, jak wyłączyć automatyczne dopasowywanie podczas konfigurowania widoku mapy udostępniania podróży.

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,
  ...
});

Co dalej?

Dostosowywanie znaczników