עיצוב מפה

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

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

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

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

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

כדי להחיל סגנון מפה על מפת שיתוף הנסיעות של הצרכן ב-JavaScript, צריך לציין mapId וגם כל mapOptions אחר כשיוצרים את JourneySharingMapView.

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

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

עיצוב מפות ישירות בקוד שלכם

אפשר גם להתאים אישית את עיצוב המפה על ידי הגדרת אפשרויות המפה כשיוצרים את JourneySharingMapView. בדוגמאות הבאות מוסבר איך לעצב מפה באמצעות אפשרויות המפה. מידע נוסף על האפשרויות במפה שאפשר להגדיר מופיע בקטע mapOptions חומר העזר בנושא JavaScript של API של מפות Google.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

הצגת מידע במפה

להציג מידע נוסף על כלי רכב או על סמן מיקום באמצעות InfoWindow. מידע נוסף זמין במאמר InfoWindow.

הדוגמה הבאה ממחישה איך ליצור InfoWindow ולצרף אותו לסמן של הרכב:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

השבתת התאמה אוטומטית

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

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

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

התאמה אישית של הסמנים