עיצוב מפה

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

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

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

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

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

ConsumerMapView

כדי להשתמש בעיצוב מפות מבוסס-ענן ב-ConsumerMapView, צריך להגדיר את השדה mapId בתאריך GoogleMapOptions ומעבירים את GoogleMapOptions אל getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) או getConsumerGoogleMapAsync(ConsumerMapמוכניםCallback, 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 במאמרי העזרה של JavaScript API של מפות 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. אפשר להשתמש באפשרויות הבאות של הרשאות גישה כדי ליצור קריטריונים: קביעת החשיפה של רכיב משימה:

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

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

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

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

מוצג תמיד

אף פעם לא גלוי

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

רכיב נתונים להתאמה חשיפה קריטריון
קו פוליגוני של מסלול הצגה הרכב נמצא בטווח של 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,
  ...
});

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