עיצוב מפה

בחירת פלטפורמה: Android iOS JavaScript

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

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

כדי לעצב מפה, אתם צריכים אפליקציה לצרכנים עם הדברים הבאים:

• תצוגת מפה. מידע נוסף מופיע בקטע אתחול תצוגת המפה.

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

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

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

אלה ההתאמות האישיות הזמינות:

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

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

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

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

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

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

גם הכיתות ConsumerMapView וגם הכיתות ConsumerMapFragment תומכות בעיצוב מפות מבוסס-ענן. כדי להשתמש בעיצוב מפות מבוסס-ענן, צריך לוודא שמעבד המפות שנבחר הוא 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
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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