עיצוב מפה

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ConsumerMapView

כדי להשתמש בעיצוב מפות מבוסס-ענן ב-ConsumerMapView, יש להגדיר את השדה mapId בתאריך GoogleMapOptions ומעבירים את GoogleMapOptions אל getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or 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 כברירת מחדל

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

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

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

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

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

השבתה או הפעלה של AutoCamera באמצעות AllowCameraAutoUpdate לנכס.

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

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

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