سبک‌دار کردن نقشه

پلاتفرم را انتخاب کنید: 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.
});

TypeScript

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 در مرجع «میانای برنامه‌سازی کاربردی جاوا اسکریپت در 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" }
        ]
      }
    ]
  }
});

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

نمایش اطلاعات روی نقشه

نمایش اطلاعات بیشتر درباره خودرو یا نشانگر مکان بااستفاده از 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();

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

غیرفعال کردن برازش خودکار

با غیرفعال کردن برازش خودکار، می‌توانید مانع از این شوید که نقشه به‌طور خودکار نمای دید را با وسیله نقلیه و مسیر پیش‌بینی‌شده برازش دهد. مثال زیر نشان می‌دهد که چگونه هنگام پیکربندی نمای نقشه هم‌رسانی سفر، برازش خودکار را غیرفعال کنید.

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

قدم بعدی چیست

سفارشی‌سازی نشانگرها