Haritanın stilini ayarlama

Platform seçin: Android iOS JavaScript

Bu belgede, haritanın görünümünü ve tarzını nasıl özelleştireceğiniz, veri görünürlüğünü ve görünüm alanı seçeneklerini nasıl kontrol edeceğiniz açıklanmaktadır. Bu işlemi aşağıdaki yöntemlerle yapabilirsiniz:

  • Bulut tabanlı harita stilini kullanma
  • Harita stili seçeneklerini doğrudan kendi kodunuzda ayarlama

Bulut tabanlı harita stilleriyle haritaya stil uygulama

JavaScript tüketici seyahati paylaşım haritanıza harita stili uygulamak için JourneySharingMapView oluştururken bir mapId ve diğer mapOptions'ı belirtin.

Aşağıdaki örneklerde, harita kimliğiyle harita stilinin nasıl uygulanacağı gösterilmektedir.

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

Haritaları doğrudan kendi kodunuzda stilize etme

JourneySharingMapView oluştururken harita seçeneklerini belirleyerek harita stilini de özelleştirebilirsiniz. Aşağıdaki örneklerde, harita seçenekleri kullanılarak haritanın nasıl stilize edileceği gösterilmektedir. Hangi harita seçeneklerini ayarlayabileceğiniz hakkında daha fazla bilgi için Google Maps JavaScript API referansındaki mapOptions bölümüne bakın.

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

Haritada bilgi görüntüleme

InfoWindow kullanarak bir araç veya konum işaretçisi hakkında ek bilgiler gösterin. Daha fazla bilgi için InfoWindow konusuna bakın.

Aşağıdaki örnekte, nasıl InfoWindow oluşturulacağı ve bunun bir araç işaretçisine nasıl ekleneceği gösterilmektedir:

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

Otomatik sığdırmayı devre dışı bırakma

Otomatik sığdırma özelliğini devre dışı bırakarak haritanın, görünüm alanını araca ve tahmini rotaya otomatik olarak sığdırmasını durdurabilirsiniz. Aşağıdaki örnekte, yolculuk paylaşımı harita görünümünü yapılandırırken otomatik sığdırmanın nasıl devre dışı bırakılacağı gösterilmektedir.

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

Sırada ne var?

İşaretçileri özelleştirme