עיצוב מפה

במסמך הזה מוסבר איך להתאים אישית את המראה והסגנון של המפה, ואיך לקבוע את מידת החשיפה של הנתונים ואת אפשרויות שדה התצוגה. אפשר לעשות זאת בדרכים הבאות:

  • שימוש בעיצוב מפות מבוסס-ענן
  • הגדרת אפשרויות של סגנון המפה ישירות בקוד שלכם

עיצוב המפה באמצעות עיצוב מפות מבוסס-ענן

התאמה אישית של העיצוב והסגנון של רכיב המפות באמצעות עיצוב מפות מבוסס-ענן. אתם יכולים ליצור ולערוך סגנונות מפה במסוף Google Cloud לכל האפליקציות שלכם שמשתמשות במפות Google, בלי צורך לבצע שינויים בקוד. מידע נוסף זמין במאמר עיצוב מפות מבוסס-ענן.

גם הכיתות ConsumerMapView וגם הכיתות ConsumerMapFragment תומכות בעיצוב מפות מבוסס-ענן. כדי להשתמש בעיצוב מפות מבוסס-ענן, צריך לוודא שה-renderer שנבחר למפות הוא LATEST. בקטעים הבאים מפורטות דוגמאות לשימוש בסגנון של מפות מבוססות-ענן בפרויקט.

ConsumerMapView

כדי להשתמש בסגנון של מפות מבוססות-ענן ב-ConsumerMapView, מגדירים את השדה mapId ב-GoogleMapOptions ומעבירים את GoogleMapOptions אל getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) או אל getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions).

דוגמה

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

יש שתי דרכים להשתמש בעיצוב מפות מבוסס-ענן ב-ConsumerMapFragments:

  • באופן סטטי עם ה-XML.
  • באופן דינמי באמצעות newInstance.

באופן סטטי עם ה-XML

כדי להשתמש בסגנון של מפות מבוססות-ענן עם ה-XML בקטע ConsumerMapFragment, מוסיפים את מאפיין ה-XML map:mapId עם הערך שצוין בשדה mapId. מקרה לדוגמה:

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

באופן דינמי באמצעות newInstance

כדי להשתמש בעיצוב מפות מבוסס-ענן עם newInstance ב-ConsumerMapFragment, מגדירים את השדה mapId ב-GoogleMapOptions ומעבירים את GoogleMapOptions אל newInstance. מקרה לדוגמה:

Java

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

Kotlin

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}

כדי להחיל סגנון מפה על מפת שיתוף הנסיעות של הצרכן ב-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 במסמכי העזרה של ממשק ה-API של JavaScript במפות Google.

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

שליטה בחשיפה של נתוני המשימות ל-SDK

אתם יכולים לקבוע את מידת החשיפה של אובייקטים מסוימים של משימות במפה באמצעות כללי חשיפה.

הרשאות הגישה שמוגדרות כברירת מחדל לנתוני המשימות

כברירת מחדל, הנתונים של המשימות שהוקצו לרכב גלויים כשהרכב נמצא בטווח של 5 תחנות מהמשימה. החשיפה תסתיים כשהמשימה תושלם או תבוטל.

בטבלה הזו מוצגת רמת החשיפה שמוגדרת כברירת מחדל לכל סוג של משימה. אפשר להתאים אישית את הרשאות הגישה של משימות רבות, אבל לא של כולן. פרטים נוספים על סוגי המשימות זמינים בקטע סוגי משימות במדריך משימות מתוזמנות.

סוג המשימה ברירת המחדל של היכולת לראות אפשר להתאים אישית? תיאור
משימות של זמינות מוגבלת לא גלוי לא משמש להפסקות של הנהג ולתדלוק. אם המסלול למשימה של משלוח מכיל גם עצירה אחרת של רכב, העצירה הזו לא תוצג אם היא מכילה רק משימות שלא זמינות. זמן ההגעה המשוער וזמן ההשלמה המשוער של המשימה עדיין יוצגו במשימה עצמה.
פתיחת משימות של כלי רכב גלוי כן החשיפה מסתיימת כשהמשימה מסתיימת או מבוטלת. אתם יכולים להתאים אישית את החשיפה של משימות פתוחות ברכב. התאמה אישית של החשיפה של משימות פתוחות ברכב
משימות סגורות בנושא כלי רכב לא גלוי לא אי אפשר להתאים אישית את החשיפה של משימות סגורות בנושא רכבים.

התאמה אישית של החשיפה של משימות פתוחות ברכב

בממשק TaskTrackingInfo יש כמה רכיבים של נתוני משימות שאפשר להציג באמצעות Consumer SDK.

רכיבי נתונים של משימות שניתנים להתאמה אישית

קווים פוליגונים של מסלולים

זמן ההגעה המשוער

זמן משוער להשלמת המשימה

המרחק שנותר לנסיעה עד למשימה

מספר תחנות העצירה שנותרו

מיקום הרכב

אפשרויות הגישה לכל משימה

כדי להתאים אישית את הגדרות החשיפה לכל משימה בנפרד, מגדירים את השדה TaskTrackingViewConfig כשיוצרים או מעדכנים משימה ב-Fleet Engine. אפשר להשתמש באפשרויות הבאות של רמת החשיפה כדי ליצור קריטריונים לקביעת רמת החשיפה של רכיב משימה:

אפשרויות הגדרת הרשאות גישה

מספר תחנות העצירה שנותרו

משך הזמן עד לשעת ההגעה המשוערת

מרחק הנסיעה שנותר

מוצג תמיד

אף פעם לא גלוי

לדוגמה, נניח שבהתאמה אישית לדוגמה משנים את רמת החשיפה של שלושה רכיבי נתונים לפי הקריטריונים שמפורטים בטבלה הבאה. כל שאר הרכיבים פועלים לפי כללי ברירת המחדל של החשיפה.

אלמנט הנתונים שרוצים לשנות חשיפה קריטריון
קו פוליגוני של מסלול הצגה הרכב נמצא במרחק של 3 תחנות.
זמן הגעה משוער הצגה מרחק הנסיעה שנותר קצר מ-5,000 מטר.
מספר תחנות העצירה שנותרו אל תציג לעולם הרכב נמצא במרחק של 3 תחנות.

ההגדרה הזו מוצגת בדוגמה הבאה:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

קווים פוליגונים של מסלולים וכללי חשיפה של מיקום הרכב

קווים פוליגונליים של מסלולים לא יכולים להיות גלויים אלא אם גם מיקום הרכב גלוי. אחרת, אפשר להסיק את מיקום הרכב לפי קצה הקו הפוליגונלי.

ההנחיות האלה יעזרו לכם לספק שילוב תקין של אפשרויות החשיפה של קו הפוליגון של המסלול ומיקום הרכב.

אותן אפשרויות חשיפה קריטריון חשיפה הדרכה
אפשרויות של קווים פוליגונליים של מסלולים שמוגדרות כ'תמיד מוצגים'. מגדירים את מיקום הרכב כ'גלוי תמיד'.
מיקום הרכב מוגדר ל'אף פעם לא גלוי'. מגדירים את קווים פוליגונליים של מסלולים כך שלא יוצגו אף פעם.
אפשרות החשיפה יכולה להיות אחת מהאפשרויות הבאות:
  • מספר תחנות העצירה שנותרו
  • משך הזמן עד לזמן ההגעה המשוער
  • מרחק הנסיעה הנותר

מגדירים את האפשרויות של קו הפוליגון של המסלול לערך שקטן מזה שהוגדר למיקום הרכב או שווה לו. לדוגמה:

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
אפשרויות שונות של הרשאות גישה קריטריונים של חשיפה הדרכה
מיקום הרכב גלוי

זה קורה רק כשגם מיקום הרכב וגם אפשרויות החשיפה של קו הפוליגון מתקיימים. לדוגמה:

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

בדוגמה הזו, מיקום הרכב גלוי רק אם מספר העצירות שנותרו הוא לפחות 3 וגם המרחק שנותר לנסיעה הוא לפחות 3,000 מטרים.

השבתת ההתאמה האוטומטית

כדי למנוע מהמפה להתאים את חלון התצוגה באופן אוטומטי לרכב ולמסלול הצפוי, משביתים את ההתאמה האוטומטית. בדוגמה הבאה מוסבר איך להשבית את ההתאמה האוטומטית כשמגדירים את תצוגת המפה של שיתוף המסלול.

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

המאמרים הבאים