עיצוב מפה

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

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

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

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

המחלקות ConsumerMapView ו-ConsumerMapFragment תומכות בעיצוב מפות מבוסס-ענן. כדי להשתמש בעיצוב מפות מבוסס-ענן, צריך לוודא שרכיב ה-renderer של המפות שנבחר הוא 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 ממקד את המצלמה

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

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

‫`AutoCamera`

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

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

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

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

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

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

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

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