עיצוב מפה

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

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

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

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

ניתן להתאים אישית את העיצוב והסגנון של רכיב המפות באמצעות עיצוב מפות מבוסס-ענן. אתם יכולים ליצור ולערוך סגנונות מפה במסוף 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 מרכז את המצלמה

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

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

לפרטים על הלחצן My Location, ראו הלחצן My Location במסמכי התיעוד של Maps JavaScript API.

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

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

1. משביתים את AutoCamera באמצעות ConsumerController.setAutoCameraEnabled().

2. מקבלים את גבולות המצלמה המומלצים באמצעות ConsumerController.getCameraUpdate()‎.

3. צריך לספק את CameraUpdate כארגומנט לאחת מהפונקציות הבאות של Android:

   • GoogleMap.moveCamera()

   • GoogleMap.animateCamera().

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

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