Definizione di una mappa

Seleziona la piattaforma: Android iOS JavaScript

Questo documento illustra come personalizzare l'aspetto di una mappa e controllare la visibilità dei dati e le opzioni dell'area visibile. Puoi farlo nei seguenti modi:

  • Utilizzare la personalizzazione delle mappe basata su cloud
  • Impostare le opzioni di stile della mappa direttamente nel tuo codice

Personalizzare la mappa con la personalizzazione delle mappe basata su cloud

Per applicare uno stile di mappa alla mappa di condivisione dei viaggi dei consumatori in JavaScript, specifica un mapId e qualsiasi altro mapOptions quando crei il JourneySharingMapView.

Gli esempi riportati di seguito mostrano come applicare uno stile di mappa con un ID mappa.

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

Definire lo stile delle mappe direttamente nel codice

Puoi anche personalizzare lo stile della mappa impostando le opzioni della mappa quando crei il JourneySharingMapView. Gli esempi riportati di seguito mostrano come applicare uno stile a una mappa utilizzando le opzioni mappa. Per ulteriori informazioni sulle opzioni di mappa che puoi impostare, consulta mapOptions nel riferimento all'API Google Maps JavaScript.

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" }
        ]
      }
    ]
  }
});

Visualizzare le informazioni sulla mappa

Mostrare informazioni aggiuntive su un veicolo o un indicatore di posizione utilizzando un InfoWindow. Per ulteriori informazioni, consulta InfoWindow.

Il seguente esempio mostra come creare un InfoWindow e collegarlo a un indicatore di veicolo:

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();

Disattivare l'adattamento automatico

Puoi impedire alla mappa di adattare automaticamente l'area visibile al veicolo e al percorso previsto disattivando l'adattamento automatico. L'esempio seguente mostra come disattivare l'adattamento automatico quando configuri la visualizzazione della mappa per la condivisione del percorso.

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

Passaggi successivi

Personalizzare gli indicatori