עיצוב מפה

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

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

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

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

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

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

בנוסף, צריך להגדיר את שירותי ה-Backend שנדרשים ל-Consumer SDK, ולהגדיר את Consumer SDK. פרטים נוספים זמינים במאמרים הגדרת Consumer 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).

דוגמה

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 שמופעלת כברירת מחדל בלחצן המיקום שלי המובנה ב-Maps SDK. המצלמה מבצעת זום כדי להתמקד במסלול הנסיעה ובנקודת הציון הבאה בנסיעה.

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

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

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

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

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

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

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

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