Haritanın stilini ayarlama

Bu dokümanda, bir haritanın ve denetimin görünüm ve tarzının nasıl özelleştirileceği ele alınmaktadır veri görünürlüğü ve görüntü alanı seçenekleri sağlar. Bunu aşağıdaki yollarla yapabilirsiniz:

• Bulut tabanlı harita stilleri kullanın
• Harita stili seçeneklerini doğrudan kendi kodunuzda ayarlama

Bulut tabanlı harita stilleriyle haritayı biçimlendirin

Bulut tabanlı haritaları kullanarak harita bileşeninin görünümünü ve tarzını özelleştirin görünüm. Tüm cihazlarınız için Google Cloud Console'da harita stilleri oluşturup düzenleyebilirsiniz kodda herhangi bir değişiklik yapmanıza gerek kalmadan Google Haritalar'ı kullanan uygulamalarınız için geçerlidir. Daha fazla bilgi için bkz. Bulut tabanlı harita stilleri.

Hem ConsumerMapView ve ConsumerMapFragment Sınıflar bulut tabanlı harita stilini destekler. Bulut tabanlı harita stilleri kullanmak için, seçilen haritaların oluşturucu LATEST. Aşağıdaki bölümler, en iyi uygulamaları paylaştık.

ConsumerMapView

ConsumerMapView özelliğinde bulut tabanlı harita stilini kullanmak için GoogleMapOptions üzerindeki mapId alanını dâhil edin ve GoogleMapOptions ayarını getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Örnek

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

Google Cloud'da bulut tabanlı harita stilini kullanmanın iki yolu vardır: ConsumerHaritaFragments:

• XML ile statik olarak.
• newInstance ile dinamik olarak.

XML ile statik olarak

Bulut tabanlı harita stilini XML ile kullanmak için ConsumerMapFragment, map:mapId XML özelliğini belirtilen mapId. Aşağıdaki örneğe bakın:

<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 ile dinamik olarak

Bulut tabanlı harita stilini newInstance ile kullanmak için ConsumerMapFragment, GoogleMapOptions üzerinde mapId alanını ayarlayıp GoogleMapOptions - newInstance. Aşağıdaki örneğe bakın:

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

JavaScript tüketici yolculuğu paylaşımı haritanıza harita stili uygulamak için bir mapId ve diğer mapOptions JourneySharingMapView öğesini oluşturduğunuzda.

Aşağıdaki örneklerde, harita kimliğiyle harita stilinin nasıl uygulanacağı gösterilmektedir.

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

Haritaları doğrudan kendi kodunuzda biçimlendirin

Ayrıca, yeni bir harita oluştururken harita seçenekleri ayarlayarak harita stilini özelleştirebilirsiniz. JourneySharingMapView Aşağıdaki örneklerde, harita seçenekleri. Ayarlayabileceğiniz harita seçenekleri hakkında daha fazla bilgi için mapOptions referans değeri ekleyin.

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

Bilgileri haritada görüntüleyin

Bir araç veya konum işaretçisiyle ilgili ek bilgileri görüntülemek için: InfoWindow Daha fazla bilgi için bkz. InfoWindow.

Aşağıdaki örnekte, InfoWindow oluşturma ve ekleme işleminin nasıl yapılacağı gösterilmektedir bir araç işaretçisine ekleyin:

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

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

Otomatik sığdırmayı devre dışı bırak

Haritanın görüntü alanını otomatik olarak araca sığdırmasını durdurabilirsiniz ve öngörülen rotayı otomatik olarak sığdırmayı devre dışı bırakır. Aşağıdaki örnek yolculuk paylaşımını yapılandırdığınızda otomatik sığdırmanın nasıl devre dışı bırakılacağını gösterir harita görünümüne gidin.

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

Sırada ne var?

İşaretleri özelleştirme