עיצוב מפה

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

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

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

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

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

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

כמו כן, צריך להגדיר את השירותים לקצה העורפי שדרושים לצרכנים ב-SDK. ולהגדיר את ה-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 של מפות ל-iOS.

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

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

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

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

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

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