עיצוב מפה

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

לפני שמתחילים

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

• תצוגת מפה. איך מפעילים את תצוגת המפה

• דרך לטיפול באירועים בתצוגת המפה. טיפול באירועים של תצוגת המפה

בנוסף, צריך להגדיר את שירותי הקצה העורפי שנדרשים ל-Consumer SDK ולהגדיר את ה-Consumer SDK. פרטים נוספים זמינים במאמרים הגדרת ה-SDK של הצרכן ומהו Fleet Engine?.

התאמה אישית של המפה

אפשרויות ההתאמה האישית הזמינות הן:

• עיצוב המפה: אפשר לעצב את הצבעים, הקווים הפוליגונליים ומאפיינים אחרים במפה באמצעות עיצוב מפות מבוסס-ענן. בחירת סגנון למפה

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

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

  ה-SDK מספק את האפשרויות האלה באמצעות המאפיין consumerMapStyleCoordinator. המאפיין הזה זמין באמצעות הכיתה GMTCMapView.

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

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

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

ConsumerMapView

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

דוגמה

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

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. מקרה לדוגמה:

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;
  }
}

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
  }
}

איך משנים את זום המצלמה כדי להתמקד בנסיעה

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

• AutoCamera: אם רוצים להשתמש ב-AutoCamera, לא צריך לעשות שום דבר. המצלמה עוקבת אחרי הנסיעה כברירת מחדל.

• התאמה אישית של התנהגות המצלמה: כדי להתאים אישית את התנהגות המצלמה, צריך להשבית את AutoCamera ואז לבצע את ההתאמות האישיות.

AutoCamera מרכז את המצלמה כברירת מחדל

ב-Consumer SDK יש תכונה AutoCamera שמופעלת כברירת מחדל בלחצן המובנה המיקום שלי של Maps SDK. המצלמה תגדיל את התצוגה כדי להתמקד במסלול הנסיעה ובנקודת העצירה הבאה.

אם רוצים להשתמש ב-AutoCamera, צריך לוודא שהוא מופעל. מידע נוסף זמין במאמר allowCameraAutoUpdate.

פרטים על הלחצן המיקום שלי ב-Maps SDK מופיעים בקטע הלחצן 'המיקום שלי' במסמכי התיעוד של Maps SDK ל-iOS.

התאמה אישית של התנהגות המצלמה

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

משביתים או מפעילים את AutoCamera באמצעות המאפיין AllowCameraAutoUpdate.

אפשרויות נוספות להתאמה אישית של המצלמה מפורטות בקטע הזזת המצלמה במסמכי התיעוד של Maps SDK ל-iOS.

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

מעקב אחרי נסיעה ב-iOS