Оформление карты

Выберите платформу: Android iOS JavaScript

В этом документе описано, как настроить внешний вид карты, а также управлять видимостью данных и параметрами области просмотра. Это можно сделать следующими способами:

  • Используйте облачное оформление карт.
  • Задавайте параметры стиля карты непосредственно в собственном коде.

Оформите карту с помощью облачных инструментов для оформления карт.

Чтобы применить стиль карты к вашей JavaScript-карте для совместного использования поездок, укажите mapId и любые другие mapOptions при создании объекта JourneySharingMapView .

Следующие примеры показывают, как применить стиль карты с помощью идентификатора карты.

JavaScript 

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Машинопись 

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Сопоставление стилей непосредственно в вашем собственном коде

Вы также можете настроить стиль карты, задав параметры карты при создании JourneySharingMapView . В следующих примерах показано, как настроить стиль карты с помощью параметров карты. Для получения дополнительной информации о том, какие параметры карты можно установить, см. mapOptions в справочнике по JavaScript API Google Maps.

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

Машинопись 

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Отобразить информацию на карте

Отображение дополнительной информации о транспортном средстве или маркере местоположения с помощью InfoWindow . Для получения дополнительной информации см. InfoWindow .

В следующем примере показано, как создать InfoWindow и прикрепить его к маркеру транспортного средства:

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

Машинопись 

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

Отключить автоматическую установку

Вы можете отключить автоматическую подгонку карты под транспортное средство и предполагаемый маршрут, чтобы предотвратить её автоматическую подгонку. В следующем примере показано, как отключить автоматическую подгонку при настройке режима просмотра карты для совместного использования маршрута.

JavaScript 

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Машинопись 

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Что дальше?

Настройка маркеров