Karte gestalten

Plattform auswählen: Android iOS JavaScript

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

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

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:

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

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.

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.
});

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.

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" }
        ]
      }
    ]
  }
});

Informationen auf der Karte anzeigen

Blenden Sie zusätzliche Informationen zu einem Fahrzeug oder einer Standortmarkierung mithilfe eines InfoWindow Weitere Informationen finden Sie unter InfoWindow.

Das folgende Beispiel zeigt, wie Sie eine InfoWindow erstellen und anhängen. zu einer Fahrzeugmarkierung hinzufügen:

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();

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.

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,
  ...
});

Nächste Schritte

Markierungen anpassen