Bu dokümanda, haritaların görünümünü ve tarzını özelleştirmenin yanı sıra veri görünürlüğünü ve görüntü alanı seçeneklerini kontrol etme hakkında bilgiler verilmektedir. Bunu aşağıdaki yöntemlerle yapabilirsiniz:
- Bulut tabanlı harita stillerini kullanma
- Harita stili seçeneklerini doğrudan kendi kodunuzda ayarlama
Bulut tabanlı harita stilleri ile haritaya stil uygulama
Bulut tabanlı harita stillerini kullanarak haritalar 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 stillerini 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'yi getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions) veya getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions) işlevine 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'te bulut tabanlı harita stillerini kullanmanın iki yolu vardır:
- XML ile statik olarak.
newInstanceile 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 bir 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.
});
Haritalara doğrudan kendi kodunuzda stil uygulama
JourneySharingMapView'yi oluştururken harita seçeneklerini ayarlayarak da harita stilini özelleştirebilirsiniz. Aşağıdaki örneklerde, harita seçenekleri kullanılarak bir haritaya nasıl stil verileceği gösterilmektedir. 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" }
]
}
]
}
});
Görev verilerinin SDK'ya görünürlüğünü kontrol etme
Görünürlük kurallarını kullanarak haritada belirli görev nesnelerinin görünürlüğünü kontrol edebilirsiniz.
Görev verileri için varsayılan görünürlük
Varsayılan olarak, bir araca atanan görevlerle ilgili veriler araç, görevden 5 durak uzaklıktayken görünür. Görev tamamlandığında veya iptal edildiğinde görünürlük sona erer.
Bu tabloda, her görev türünün varsayılan görünürlüğü gösterilmektedir. Görevlerin görünürlüğünü özelleştirebilirsiniz ancak tümünü değil. Görev türleri hakkında daha fazla bilgi için Planlanmış görevler kılavuzundaki Görev türleri bölümüne bakın.
| Görev türü | Varsayılan görünürlük | Özelleştirilebilir mi? | Açıklama |
|---|---|---|---|
| Kullanılamazlık görevleri | Görünmez | Hayır | Sürücünün molaları ve yakıt ikmali için kullanılır. Bir teslimat görevine giden rota başka bir araç durağı da içeriyorsa bu durak, yalnızca "Kullanılamıyor" görevleri içeriyorsa gösterilmez. Teslimat görevi için tahmini varış zamanı ve tahmini görev tamamlama zamanı gösterilmeye devam eder. |
| Araç görevlerini açma | Gösteriliyor | Evet | Görev tamamlandığında veya iptal edildiğinde görünürlük sona erer. Açık araç görevlerinin görünürlüğünü özelleştirebilirsiniz. Açık araç görevlerinin görünürlüğünü özelleştirme başlıklı makaleyi inceleyin. |
| Kapalı araç görevleri | Görünmez | Hayır | Kapalı araç görevlerinin görünürlüğünü özelleştiremezsiniz. |
Açık araç görevlerinin görünürlüğünü özelleştirme
TaskTrackingInfo arayüzü, Tüketici SDK'sı ile görünür hale getirilebilecek çeşitli görev verisi öğeleri sağlar.
| Özelleştirilebilir görev verisi öğeleri | |
|---|---|
|
Rota çoklu çizgileri Tahmini varış zamanı Görevin tahmini tamamlanma süresi |
Göreve arabayla kalan mesafe Kalan durak sayısı Araç konumu |
Görev başına görünürlük seçenekleri
Fleet Engine'da görev oluştururken veya güncellerken TaskTrackingViewConfig ayarını yaparak görünürlük yapılandırmasını görev bazında özelleştirebilirsiniz. Bir görev öğesinin görünürlüğünü belirlemek için ölçüt oluşturmak üzere aşağıdaki görünürlük seçeneklerini kullanın:
| Görünürlük seçenekleri | ||
|---|---|---|
|
Kalan durak sayısı Tahmini varış saatine kadar geçecek süre Kalan sürüş mesafesi |
Her zaman görünür Hiçbir zaman görünmez |
|
Örnek olarak, bir özelleştirmenin aşağıdaki tabloda gösterilen ölçütleri kullanarak üç veri öğesinin görünürlüğünü ayarladığını varsayalım. Diğer tüm öğeler varsayılan görünürlük kurallarına uyar.
| Ayarlanacak veri öğesi | Görünürlük | Ölçüt |
|---|---|---|
| Rota çoklu çizgisi | Göster | Araç 3 durak uzaklıktadır. |
| TVS | Göster | Kalan sürüş mesafesi 5.000 metreden kısaysa |
| Kalan durak sayısı | Hiçbir zaman gösterme | Araç 3 durak uzaklıktadır. |
Aşağıdaki örnekte bu yapılandırma gösterilmektedir:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Rota poli çizgileri ve araç konumu görünürlüğü kuralları
Araç konumu da görünmediği sürece rota çoklu çizgileri görünmez. Aksi takdirde, araç konumu bir çoklu çizginin sonuna göre tahmin edilebilir.
Bu kurallar, rota çoklu çizgisi ve araç konumu görünürlük seçenekleri için geçerli bir kombinasyon sağlamanıza yardımcı olur.
| Aynı görünürlük seçenekleri | Görünürlük ölçütü | Yönerge |
|---|---|---|
| Rota çoklu çizgileri seçenekleri her zaman görünür olarak ayarlanır. | Araç konumunu her zaman görünür olarak ayarlayın. | |
| Araç konumu hiçbir zaman görünmez olarak ayarlanmış. | Rota poli çizgilerini hiçbir zaman görünmeyecek şekilde ayarlayın. | |
Görünürlük seçeneği aşağıdakilerden biri olmalıdır:
|
Rota çoklu çizgisi seçeneklerini, araç konumu için ayarlanan değerden az veya eşit bir değere ayarlayın. Örneğin: "taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"vehicleLocationVisibility": {
"remainingStopCountThreshold": 5
},
}
|
|
| Farklı görünürlük seçenekleri | Görünürlük ölçütleri | Yönerge |
| Araç konumu görünür | Bu durum yalnızca araç konumu ve poli çizgisi görünürlüğü seçeneklerinin ikisi de karşılandığında gerçekleşir. Örneğin: "taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"vehicleLocationVisibility": {
"remainingDrivingDistanceMetersThreshold": 3000
},
}Bu örnekte, araç konumu yalnızca kalan durak sayısı en az 3 VE kalan sürüş mesafesi en az 3.000 metre ise görünür. |
Otomatik uyumu devre dışı bırakma
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,
...
});