Karte gestalten

In diesem Dokument wird beschrieben, wie Sie das Design einer Karte und eines Steuerelements anpassen können. für die Sichtbarkeit von Daten und den Darstellungsbereich. Dazu haben Sie folgende Möglichkeiten:

• Cloudbasiertes Gestalten von Karteninhalten verwenden
• Kartenstiloptionen direkt im eigenen Code festlegen

Funktionen zum cloudbasierten Gestalten von Karteninhalten verwenden

Erscheinungsbild der Google Maps-Komponente mithilfe cloudbasierter Karten anpassen Stile. In der Google Cloud Console können Sie Kartenstile für alle Ihrer Apps, die Google Maps verwenden, ohne dass Sie Änderungen an Ihrem Code vornehmen müssen. Weitere Informationen finden Sie unter Cloudbasiertes Gestalten von Karteninhalten

Sowohl die ConsumerMapView und die ConsumerMapFragment -Klassen unterstützen das cloudbasierte Gestalten von Karteninhalten. Wenn Sie das cloudbasierte Gestalten von Karteninhalten verwenden möchten, müssen die ausgewählten Karten Renderer ist LATEST. In den folgenden Abschnitten finden Sie Beispiele cloudbasiertes Gestalten von Karteninhalten.

ConsumerMapView

Wenn Sie das cloudbasierte Gestalten von Karteninhalten in ConsumerMapView verwenden möchten, legen Sie den Parameter mapId-Feld auf GoogleMapOptions und übergeben Sie GoogleMapOptions an getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Beispiel

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

Es gibt zwei Möglichkeiten, das cloudbasierte Gestalten von Karteninhalten zu nutzen: ConsumerMapFragments:

• Statisch mit der XML-Datei.
• Dynamisch mit newInstance.

Statisch mit XML

Wenn Sie das cloudbasierte Gestalten von Karteninhalten mit dem XML-Code in der ConsumerMapFragment, fügen Sie das XML-Attribut map:mapId mit dem angegebenen Wert mapId Sehen Sie sich folgendes Beispiel an:

<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"/>

Dynamisch mit newInstance

So verwenden Sie das cloudbasierte Gestalten von Karteninhalten mit newInstance in ConsumerMapFragment, legen Sie das Feld mapId auf GoogleMapOptions fest und übergeben Sie den GoogleMapOptions bis newInstance. Sehen Sie sich folgendes Beispiel an:

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
  }
}

Um einen Kartenstil auf Ihre JavaScript-Karte zum Teilen des Kaufprozesses anzuwenden, geben Sie mapId und alle anderen mapOptions wenn Sie JourneySharingMapView erstellen.

Die folgenden Beispiele zeigen, wie ein Kartenstil mit einer Karten-ID angewendet wird.

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

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

Karten direkt in Ihrem eigenen Code gestalten

Sie können Kartenstile auch anpassen, indem Sie beim Erstellen der Karte die Kartenoptionen festlegen. JourneySharingMapView Die folgenden Beispiele zeigen, wie Sie mithilfe von Kartenoptionen. Weitere Informationen dazu, welche Kartenoptionen Sie festlegen können, finden Sie unter mapOptions in der Google Maps JavaScript API-Referenz.

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

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

Sichtbarkeit von Aufgabendaten für das SDK steuern

Sie können die Sichtbarkeit bestimmter Aufgabenobjekte auf der Karte mithilfe von Sichtbarkeitsregeln fest.

Standardsichtbarkeit der Aufgabendaten

Standardmäßig sind Daten für Aufgaben, die einem Fahrzeug zugewiesen sind, sichtbar, wenn das nicht mehr als 5 Haltestellen von der Aufgabe entfernt ist. Die Sichtbarkeit endet, wenn die Aufgabe abgeschlossen oder abgebrochen wurde.

Diese Tabelle zeigt die Standardsichtbarkeit für jeden Aufgabentyp. Sie können die Sichtbarkeit für viele, aber nicht für alle Aufgaben anpassen. Weitere Informationen zur Aufgabe finden Sie unter Aufgabentypen im Leitfaden Geplante Aufgaben.

Sichtbarkeit offener Fahrzeugaufgaben anpassen

Die TaskTrackingInfo-Oberfläche bietet eine Reihe von Aufgabendatenelementen die mit dem Consumer SDK sichtbar gemacht werden können.

Sichtbarkeitsoptionen pro Aufgabe

Sie können die Sichtbarkeitskonfiguration für einzelne Aufgaben anpassen, indem Sie TaskTrackingViewConfig beim Erstellen oder Aktualisieren einer Aufgabe in Fleet Engine Verwenden Sie die folgenden Sichtbarkeitsoptionen, um Kriterien für Sichtbarkeit eines Aufgabenelements festlegen:

Angenommen, bei einer Beispielanpassung wird die Sichtbarkeit von drei mithilfe der Kriterien in der folgenden Tabelle. Alle anderen -Elementen die Standardregeln für die Sichtbarkeit.

Das folgende Beispiel zeigt diese Konfiguration:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Polylinien für Routen und Sichtbarkeitsregeln für Fahrzeugstandorte

Polylinien für Routen sind nur sichtbar, wenn der Fahrzeugstandort ebenfalls visible; Andernfalls kann der Fahrzeugstandort am Ende eines Polylinie.

Anhand dieser Richtlinien können Sie eine gültige Kombination für Routen erstellen. Polylinien und Fahrzeugstandorten angezeigt werden.

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

Automatische Anpassung deaktivieren

Sie können verhindern, dass der Darstellungsbereich der Karte automatisch an das Fahrzeug angepasst wird und berechnet die Route, indem Sie die automatische Anpassung deaktivieren. Im folgenden Beispiel zeigt, wie Sie die automatische Anpassung beim Konfigurieren der Freigabe der Reise deaktivieren Kartenansicht.

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

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

Nächste Schritte

• Markierungen anpassen
• Polylinien anpassen