עיצוב מפה

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

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

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

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

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

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

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

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

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

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

   • GoogleMap.moveCamera()

   • GoogleMap.animateCamera().

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

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