Bu dokümanda, bir haritanın görünümünün ve tarzının nasıl özelleştirileceği, veri görünürlüğü ve görüntü alanı seçeneklerinin nasıl kontrol edileceği ele alınmaktadır. Bunu aşağıdaki yollarla yapabilirsiniz:
- Bulut tabanlı harita stilleri kullanın
- Harita stili seçeneklerini doğrudan kendi kodunuzda ayarlama
Bulut tabanlı harita stilleri ile haritaya stil uygulama
Bulut tabanlı harita stilleri kullanarak harita bileşeninin görünümünü ve tarzını özelleştirin. Google Haritalar'ı kullanan tüm uygulamalarınız için Google Cloud Console'da harita stilleri oluşturup düzenleyebilirsiniz. Bu işlem için kodunuzda herhangi bir değişiklik yapmanız gerekmez. Daha fazla bilgi için Bulut tabanlı harita stilleri başlıklı makaleyi inceleyin.
Hem ConsumerMapView
hem de ConsumerMapFragment
sınıfları bulut tabanlı harita stilini destekler.
Bulut tabanlı harita stillerini kullanmak için seçili harita oluşturma aracının LATEST
olduğundan emin olun. Aşağıdaki bölümlerde, bulut tabanlı harita stilinin projenizle nasıl kullanılacağına dair örnekler verilmiştir.
ConsumerMapView
ConsumerMapView
içinde bulut tabanlı harita stilini kullanmak için GoogleMapOptions
üzerinde mapId
alanını ayarlayın ve GoogleMapOptions
öğesini getTüketiciGoogleHaritaAsync(TüketiciHaritasınaHazırCallback, Fragment, GoogleMapOptions)
veya getTüketiciGoogleHaritaAsync(TüketiciHaritalık Hazır Çağrı, FragmentActivity, GoogleMapOptions) olarak iletin.
Örnek
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'ta bulut tabanlı harita stilini kullanmanın iki yolu vardır:
- XML ile statik olarak.
newInstance
ile dinamik olarak.
XML ile statik olarak
ConsumerMapFragment
içindeki XML ile bulut tabanlı harita stilini kullanmak için belirtilen mapId
ile map:mapId
XML özelliğini ekleyin. 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 stillerini ConsumerMapFragment
içinde newInstance
ile kullanmak için GoogleMapOptions
'ta mapId
alanını ayarlayın ve GoogleMapOptions
'ı newInstance
'e iletin. Aşağıdaki örneğe bakın:
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 tüketici gezi paylaşımı haritanıza bir harita stili uygulamak için JourneySharingMapView
'yi oluştururken bir mapId
ve diğer tüm mapOptions
öğelerini belirtin.
Aşağıdaki örneklerde, harita kimliğiyle harita stilinin nasıl uygulanacağı gösterilmektedir.
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.
});
Haritaları doğrudan kendi kodunuzda biçimlendirin
JourneySharingMapView
öğesini oluştururken harita seçeneklerini ayarlayarak harita stilini özelleştirebilirsiniz. Aşağıdaki örneklerde, harita seçenekleri kullanılarak bir haritanın stil özelliklerinin nasıl belirleneceği gösterilmiştir. Ayarlayabileceğiniz harita seçenekleri hakkında daha fazla bilgi için Google Haritalar JavaScript API referansında mapOptions
bölümüne bakın.
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" }
]
}
]
}
});
Bilgileri haritada görüntüleme
InfoWindow
kullanarak bir araç veya konum işaretçisi hakkında ek bilgiler görüntüleyin. Daha fazla bilgi için InfoWindow
başlıklı makaleyi inceleyin.
Aşağıdaki örnekte InfoWindow
oluşturma ve bunu araç işaretçisine ekleme gösterilmektedir:
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();
Otomatik sığdırmayı devre dışı bırak
Otomatik uyumu devre dışı bırakarak haritanın görüntü alanını araca ve beklenen rotaya otomatik olarak sığdırmasını durdurabilirsiniz. Aşağıdaki örnekte, yolculuk paylaşımı harita görünümünü yapılandırırken otomatik sığdırmanın nasıl devre dışı bırakılacağı gösterilmektedir.
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,
...
});