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
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 Maps 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 bilgi görüntüleyin. Daha fazla bilgi için InfoWindow başlıklı makaleyi inceleyin.
Aşağıdaki örnekte, InfoWindow öğesinin nasıl oluşturulacağı ve bir araç işaretçisine nasıl ekleneceği 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 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,
...
});