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

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

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

برای اعمال یک سبک نقشه به نقشه اشتراک‌گذاری سفر مصرف‌کننده جاوا اسکریپت خود، هنگام ایجاد 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" }
        ]
      }
    ]
  }
});

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

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

جاوا اسکریپت 

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

جایگزینی نقشه موجود

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

برای مثال، فرض کنید یک صفحه وب با موجودیت استاندارد google.maps.Map دارید که یک نشانگر روی آن نشان داده شده است:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
    // Initialize and add the map
    function initMap() {
      // The location of Pier 39 in San Francisco
      var pier39 = {lat: 37.809326, lng: -122.409981};
      // The map, initially centered at Mountain View, CA.
      var map = new google.maps.Map(document.getElementById('map'));
      map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

      // The marker, now positioned at Pier 39
      var marker = new google.maps.Marker({position: pier39, map: map});
    }
        </script>
        <!-- Load the API from the specified URL.
           * The async attribute allows the browser to render the page while the API loads.
           * The key parameter will contain your own API key (which is not needed for this tutorial).
           * The callback parameter executes the initMap() function.
        -->
        <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
    </html>

برای افزودن کتابخانه ردیابی ناوگان جاوا اسکریپت:

  1. کد مربوط به کارخانه‌ی توکن احراز هویت را اضافه کنید.
  2. یک ارائه دهنده موقعیت مکانی را در تابع initMap() مقداردهی اولیه کنید.
  3. نمای نقشه را در تابع initMap() مقداردهی اولیه کنید. این نما شامل نقشه است.
  4. سفارشی‌سازی خود را برای مقداردهی اولیه نمای نقشه به تابع فراخوانی منتقل کنید.
  5. کتابخانه مکان را به بارگذار API اضافه کنید.

مثال جایگزینی نقشه با استفاده از وظایف زمان‌بندی‌شده

مثال‌های زیر نحوه استفاده از یک نقشه موجود را نشان می‌دهد که در آن شیء ارائه‌دهنده مکان را برای یک مورد استفاده از وظیفه زمان‌بندی‌شده مقداردهی اولیه می‌کنید. کد برای موارد استفاده از سفرهای درخواستی مشابه است، با این تفاوت که شما به جای FleetEngineVehicleLocationProvider از FleetEngineDeliveryVehicleLocationProvider استفاده می‌کنید.

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
    let locationProvider;

    // (1) Authentication Token Fetcher
    function authTokenFetcher(options) {
      // options is a record containing two keys called
      // serviceType and context. The developer should
      // generate the correct SERVER_TOKEN_URL and request
      // based on the values of these fields.
      const response = await fetch(SERVER_TOKEN_URL);
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          const data = await response.json();
          return {
            token: data.Token,
            expiresInSeconds: data.ExpiresInSeconds
          };
    }

    // Initialize and add the map
    function initMap() {
      // (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
      // as appropriate.
      locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
        YOUR_PROVIDER_ID,
        authTokenFetcher,
      });

      // (3) Initialize map view (which contains the map).
      const mapView = new google.maps.journeySharing.JourneySharingMapView({
        element: document.getElementById('map'),
        locationProviders: [locationProvider],
        // any styling options
      });

    mapView.addListener('ready', () => {
      locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;

        // (4) Add customizations like before.
        // The location of Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
        // The map, initially centered at Mountain View, CA.
        var map = mapView.map;
        map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
        // The marker, now positioned at Pier 39
        var marker = new google.maps.Marker({position: pier39, map: map});
      };
    }
        </script>
        <!-- Load the API from the specified URL
          * The async attribute allows the browser to render the page while the API loads
          * The key parameter will contain your own API key (which is not needed for this tutorial)
          * The callback parameter executes the initMap() function
          *
          * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
        -->
        <script defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
        </script>
      </body>
    </html>

اگر در نزدیکی اسکله ۳۹ با یک وسیله نقلیه تحویل کالا با شناسه مشخص شده کار می‌کنید، اکنون روی نقشه نمایش داده می‌شود.

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