به یک نقشه سبک دهید

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

این سند نحوه سفارشی‌سازی ظاهر و حس یک نقشه و کنترل گزینه‌های دید داده‌ها و نمای دید را پوشش می‌دهد. می‌توانید این کار را به روش‌های زیر انجام دهید:

  • از استایل‌دهی نقشه مبتنی بر ابر استفاده کنید
  • گزینه‌های سبک نقشه را مستقیماً در کد خود تنظیم کنید

نقشه را با استفاده از سبک نقشه‌های مبتنی بر ابر، استایل دهید

برای اعمال یک سبک نقشه به نقشه اشتراک‌گذاری سفر مصرف‌کننده جاوا اسکریپت خود، هنگام ایجاد JourneySharingMapView یک mapId و هر mapOptions دیگری را مشخص کنید.

مثال‌های زیر نحوه اعمال یک سبک نقشه با شناسه نقشه را نشان می‌دهند.

جاوا اسکریپت

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 در مرجع API جاوا اسکریپت Google Maps مراجعه کنید.

جاوا اسکریپت

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 و اتصال آن به نشانگر وسیله نقلیه را نشان می‌دهد:

جاوا اسکریپت

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

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

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

جاوا اسکریپت

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

قدم بعدی چیست؟

نشانگرها را سفارشی کنید