עיצוב מפה

בחירת פלטפורמה: 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

לפרטים על הלחצן המיקום שלי ראה לחצן 'המיקום שלי' בתיעוד של Maps JavaScript API.

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

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

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

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

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

   • GoogleMap.moveCamera()

   • GoogleMap.animateCamera().

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

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