עיצוב מפה

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

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

פרטים נוספים על הכפתור המיקום שלי מופיעים בקטע הכפתור "המיקום שלי" במסמכי התיעוד של Maps JavaScript API.

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

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

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

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

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

   • GoogleMap.moveCamera()

   • GoogleMap.animateCamera().

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

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