iOS için Gezinme SDK'sını kullanarak, haritada yerleşik kullanıcı arayüzü denetimleri ve öğelerinden hangilerinin görüneceğini ve hangi hareketlere izin vereceğinizi belirleyerek haritanızla kullanıcı deneyiminde değişiklik yapabilirsiniz. Ayrıca Gezinme Arayüzü'nün görsel görünümünü de değiştirebilirsiniz. Gezinme arayüzünde kabul edilen değişikliklerle ilgili yönergeler için Politikalar sayfasına bakın.
Harita kullanıcı arayüzü kontrolleri
Gezinme SDK'si, iOS için Google Haritalar uygulamasında bulunanlara benzer bazı yerleşik kullanıcı arayüzü denetimleri sağlar. GMSUISettings
sınıfını kullanarak bu denetimlerin görünürlüğünü değiştirebilirsiniz.
Bu sınıfta yaptığınız değişiklikler haritaya hemen yansıtılır.
Pusula
Gezinme SDK'sı, belirli koşullar altında ve yalnızca etkinleştirildiğinde haritanın sağ üst köşesinde görünen bir pusula grafiği sağlar. Pusula yalnızca kamera tam kuzey yönünden farklı bir yöne (sıfır olmayan bir yön) sahip olacak şekilde yönlendirildiğinde görünür. Kullanıcı pusulayı tıkladığında, kamera sıfır yöne (varsayılan yön) geri döner ve pusula kısa bir süre sonra kaybolur.
Navigasyon etkinleştirilmişse ve kamera modu "sonraki" olarak ayarlanmışsa, pusula görünür durumda kalır ve pusulaya dokunarak yatık ve genel bakış kamera perspektifleri arasında geçiş yapar.
Pusula varsayılan olarak devre dışıdır. Pusulayı, GMSUISettings
için compassButton
özelliğini YES
şeklinde ayarlayarak etkinleştirebilirsiniz. Ancak pusulayı her zaman
gösterilmeye zorlayamazsınız.
Swift
mapView.settings.compassButton = true
Objective-C
mapView.settings.compassButton = YES;
Konumum düğmesi
Konumum düğmesi, yalnızca Konumum düğmesi etkin olduğunda ekranın sağ alt köşesinde görünür. Kullanıcı düğmeyi tıkladığında, kamera hareket ederek kullanıcının konumu biliniyorsa mevcut konumuna odaklanır. GMSUISettings
öğesinin myLocationButton
özelliğini YES
değerine ayarlayarak düğmeyi etkinleştirebilirsiniz.
Swift
mapView.settings.myLocationButton = true
Objective-C
mapView.settings.myLocationButton = YES;
Yeniden ortalama düğmesi
Gezinme etkinleştirildiğinde, kullanıcı harita görünümünü kaydırdığında yeniden ortala düğmesi görünür ve kullanıcı haritayı yeniden ortalamak için dokunduğunda kaybolur. Yeniden ortalama düğmesinin görünmesine izin vermek için GMSUISettings
öğesinin recenterButtonEnabled
özelliğini YES
olarak ayarlayın. Yeniden ortalama düğmesinin görünmesini önlemek için recenterButtonEnabled
değerini NO
olarak ayarlayın.
Swift
mapView.settings.isRecenterButtonEnabled = true
Objective-C
mapView.settings.recenterButtonEnabled = YES;
Harita kullanıcı arayüzü aksesuarları
Gezinme SDK'sı, navigasyon sırasında iOS için Google Haritalar uygulamasında bulunanlara benzer kullanıcı arayüzü aksesuarları sağlar. Bu kontrollerin görünürlüğünü veya görsel görünümünü bu bölümde açıklandığı şekilde ayarlayabilirsiniz. Burada yaptığınız değişiklikler sürücünün bir sonraki seyahatine yansıtılır.
Gezinme üstbilgisi ve altbilgisi
Gezinme sırasında, gezinme üstbilgisi ekranın üst kısmında, gezinme altbilgisi ise alt tarafta görünür. Gezinme başlığında, rotadaki bir sonraki dönüş için sokak adı ve yol tarifinin yanı sıra bir sonraki dönüşün yönü gösterilir. Navigasyon altbilgisinde, varış noktasına tahmini süre ve mesafenin yanı sıra tahmini varış saati gösterilir.
Aşağıdaki özellikleri kullanarak gezinme üst bilgisi ve alt bilgisinin görünürlüğünü değiştirebilir ve renklerini programatik olarak ayarlayabilirsiniz:
navigationHeaderEnabled
: Gezinme üst bilgisinin görünür olup olmayacağını kontrol eder (varsayılan ayar:true
).navigationFooterEnabled
- Gezinme altbilgisinin görünür olup olmayacağını kontrol eder (varsayılan değer:true
).navigationHeaderPrimaryBackgroundColor
— Gezinme başlığının birincil arka plan rengini belirler.navigationHeaderSecondaryBackgroundColor
— Gezinme başlığının ikincil arka plan rengini belirler.
Aşağıdaki kod örneğinde üstbilgi ve altbilgi için görünürlüğün etkinleştirilmesi, ardından navigationHeaderPrimaryBackgroundColor
öğesinin mavi, navigationHeaderSecondaryBackgroundColor
öğesinin de kırmızı olarak ayarlanması gösterilmektedir.
Swift
mapView.settings.isNavigationHeaderEnabled = true
mapView.settings.isNavigationFooterEnabled = true
mapView.settings.navigationHeaderPrimaryBackgroundColor = .blue
mapView.settings.navigationHeaderSecondaryBackgroundColor = .red
Objective-C
mapView.settings.navigationHeaderEnabled = YES;
mapView.settings.navigationFooterEnabled = YES;
mapView.settings.navigationHeaderPrimaryBackgroundColor = [UIColor blueColor];
mapView.settings.navigationHeaderSecondaryBackgroundColor = [UIColor redColor];
Gezinme aksesuarı üstbilgi görünümü
İkincil gezinme başlığı görünümünü kendi özelleştirilmiş aksesuar görünümünüzle değiştirerek uygulamanızı özelleştirebilirsiniz. Bunu, GMSNavigationAccessoryView
protokolünü uygulayan bir görünüm oluşturarak yaparsınız. Bu protokolün zorunlu bir yöntemi vardır: -heightForAccessoryViewConstrainedToSize:onMapView:
. Belirli bir harita Görünümü'nde görünümünüz için kullanılabilen maksimum boyut verilir ve görünümünüz için gereken yüksekliği sağlamanız gerekir.
Ardından, setHeaderAccessoryView:
yöntemini çağırarak bu görünümü mapView'a geçirebilirsiniz.
mapView, mevcut görünümlerin animasyonunu uygular ve ardından özel görünümünüze animasyon ekler. Özel görünümünüzün görüntülenebilmesi için gezinme başlığının görünür olması gerekir.
Özel başlık aksesuarı görünümünü kaldırmak için nil
öğesini setHeaderAccessoryView:
hedefine iletin
Görünümünüzün boyutunun herhangi bir anda değişmesi gerekiyorsa invalidateLayoutForAccessoryView:
işlevini çağırarak boyutunun değiştirilmesi gereken görünümün geçişini yapabilirsiniz.
Örnek
Aşağıdaki kod örneği, GMSNavigationAccessoryView
protokolünü uygulayan özel bir görünümü göstermektedir. Bu özel görünüm, daha sonra özel gezinme başlığı aksesuar görünümü ayarlamak için kullanılır.
Swift
class MyCustomView: UIView, GMSNavigationAccessoryView {
…
func heightForAccessoryViewConstrained(to size: CGSize, on mapView: GMSMapView) -> CGFloat {
// viewHeight gets calculated as the height your view needs.
return viewHeight
}
…
}
let customView = MyCustomView(...)
mapView.setHeaderAccessory(customView)
// At some later point customView changes size.
mapView.invalidateLayout(forAccessoryView: customView)
// Remove the custom header accessory view.
mapView.setHeaderAccessory(nil)
Objective-C
@interface MyCustomView : UIView <GMSNavigationAccessoryView>
…
@end
@implementation MyCustomView
…
- (CGFloat)heightForAccessoryViewConstrainedToSize:(CGSize)size onMapView:(GMSMapView *)mapView {
// viewHeight gets calculated as the height your view needs.
return viewHeight;
}
…
@end
MyCustomView *customView = [[MyCustomView alloc] init…];
[_mapView setHeaderAccessoryView:customView];
// At some later point customView changes size.
[_mapView invalidateLayoutForAccessoryView:customView];
// Remove the custom header accessory view.
[_mapView setHeaderAccessoryView:nil];
Yol Tarifi Listesi
Uygulamanızda adım adım yol tarifleri sağlayabilirsiniz. Aşağıdaki örnekte bunu yapmanın olası bir yolu gösterilmektedir. Bu adımlar, uygulamanıza bağlı olarak değişiklik gösterebilir.
GMSNavigator
üzerindekisetDestinations
öğesi (gezgin) başarıyla tamamlandıktan ve kılavuzdaguidanceActive
etkinleştirildikten sonra bir giriş noktası düğmesini etkinleştirin.- Kullanıcı giriş noktası düğmesine dokunduğunda,
GMSMapView
(mapView
) ile ilişkilendirilmiş gezginle birGMSNavigationDirectionsListController
(denetleyici) oluşturun. - Denetleyiciyi bir
UIViewController
örneğine (görünüm denetleyicisi) ekleyin vedirectionsListView
öğesini görünüm denetleyicisinin alt görünümü olarak ekleyin. DenetleyicidekireloadData
veinvalidateLayout
yöntemleri,UICollectionView
ile birlikte çağrılmalıdır. - Görünüm denetleyicisini, uygulamanın görünüm denetleyicisi hiyerarşisine aktarın.
Aşağıdaki kod örneğinde DirectionsListViewController
ekleme işlemi gösterilmektedir.
Swift
override func viewDidLoad() {
super.viewDidLoad()
// Add the directionsListView to the host view controller's view.
let directionsListView = directionsListController.directionsListView
directionsListView.frame = self.view.frame
self.view.addSubview(directionsListView)
directionsListView.translatesAutoresizingMaskIntoConstraints = false
directionsListView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
directionsListView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
directionsListView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
directionsListView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
...
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// Ensure data is fresh when the view appears.
directionsListController.reloadData()
...
}
override func willTransition(to newCollection: UITraitCollection, with coordinator: UIViewControllerTransitionCoordinator) {
super.willTransition(to: newCollection, with: coordinator)
// Invalidate the layout during rotation.
coordinator.animate(alongsideTransition: {_ in
self.directionsListController.invalidateLayout()
})
...
}
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
// Add the directionsListView to the host view controller's view.
UIView *directionsListView = _directionsListController.directionsListView;
directionsListView.frame = self.view.bounds;
[self.view addSubview:directionsListView];
directionsListView.translatesAutoresizingMaskIntoConstraints = NO;
[directionsListView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
[directionsListView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;
[directionsListView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor].active = YES;
[directionsListView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
...
}
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
// Ensure data is fresh when the view appears.
[_directionsListController reloadData];
...
}
- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator];
void(^animationBlock)(id <UIViewControllerTransitionCoordinatorContext>context) =
^void(id <UIViewControllerTransitionCoordinatorContext>context) {
[_directionsListController invalidateLayout];
};
// Invalidate the layout during rotation.
[coordinator animateAlongsideTransition:animationBlock
completion:nil];
...
}
...
Gezi ilerleme çubuğu
Gezi ilerleme çubuğu, navigasyon başladığında haritanın sağ son kenarında görünen dikey bir çubuktur. Etkinleştirildiğinde, sürücünün varış yeri ve mevcut konumuyla birlikte seyahatin tamamına genel bir bakış sunar.
Sürücüler, trafik gibi yaklaşan sorunları yakınlaştırmalarına gerek kalmadan hızlı bir şekilde tahmin etmelerini sağlıyor. Gerekirse seyahatin rotasını yeniden çizebilirler. Sürücü yolculuğun rotasını yenilerse ilerleme çubuğu, ilgili noktadan yeni bir gezi başlamış gibi sıfırlanır.
Gezi ilerleme çubuğu aşağıdaki durum göstergelerini gösterir:
Trafik durumu: Yaklaşan trafiğin durumu.
Mevcut konum: Sürücünün yolculuktaki mevcut konumu.
Geçen rota: Yolculuğun geçen kısmı.
GMSUISettings'de navigationTripProgressBarEnabled
özelliğini ayarlayarak gezi ilerleme çubuğunu etkinleştirin.
Swift
mapView.settings.isNavigationTripProgressBarEnabled = true
Objective-C
mapView.settings.navigationTripProgressBarEnabled = YES;
Trafik ışıkları ve dur işaretleri
mapView
üzerinden trafik ışıklarını ve dur işaretlerini etkinleştirebilirsiniz. Bu özellik sayesinde sürücü, rotası boyunca trafik ışıkları veya dur işareti simgelerinin gösterilmesini sağlayabilir. Böylece, daha verimli ve doğru seyahatler için daha iyi bağlam sağlanmış olur.
Varsayılan olarak, iOS için Navigasyon SDK'sında trafik ışıkları ve dur işaretleri devre dışıdır. Bu özelliği etkinleştirmek üzere her seçenek için GMSMapView
ayarlarını ayrı ayrı çağırın:
showsTrafficLights
ve showsStopSigns
.
Swift
mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;
Objective-C
mapView.settings.showsTrafficLights = true;
mapView.settings.showsStopSigns = true;
Hız saati kontrolü
Gezinme etkinleştirildiğinde, iOS için Gezinme SDK'si haritanın alt köşesinde, geçerli hız sınırını gösteren bir hız sınırı kontrolü görüntüler. Sürücü hız sınırını aştığında, kontrol genişleyerek sürücünün geçerli hızıyla ikinci bir hız göstergesi görüntüler.
Sürücü, hız sınırını belirli bir miktarda aştığında, hız saati ekranının biçimlendirmesini değiştirmek için uyarı seviyeleri ayarlayabilirsiniz. Örneğin, sürücü hız sınırını 5 mil/sa. aştığında mevcut hızın kırmızı bir metin rengiyle, sürücünün hız sınırını 10 mil/sa. üzerine çıkardığında ise kırmızı bir arka plan rengiyle gösterileceğini belirtebilirsiniz.
Hız sınırı kontrolünü görüntülemek için GMSUISettings
öğesinin shouldDisplaySpeedometer
özelliğini YES
olarak ayarlayın. Hız sınırı kontrolünün görüntülenmesini devre dışı bırakmak için shouldDisplaySpeedometer
değerini NO
olarak ayarlayın.
Swift
mapView.shouldDisplaySpeedometer = true
Objective-C
mapView.shouldDisplaySpeedometer = YES;
Hız saatiyle ilgili uyarıları ayarlama hakkında daha fazla bilgi için Hız saati uyarılarını yapılandırma bölümüne bakın.
Hedef işaretçileri
GMSUISettings
öğesinin showsDestinationMarkers
özelliğini ayarlayarak belirli bir rotanın hedef işaretçilerini gösterebilir veya gizleyebilirsiniz. Aşağıdaki örnekte, hedef işaretçilerinin kapatılması gösterilmektedir.
Swift
mapView.settings.showsDestinationMarkers = false
Objective-C
mapView.settings.showsDestinationMarkers = NO;
Harita deneyimi özellikleri
Gezinme SDK'sı, kullanıcılarınız için navigasyon deneyiminde daha fazla özelleştirme yapmanıza olanak tanır. Örneğinizde yaptığınız değişiklikler, uygulamanızın sürücünün bir sonraki güncellemesine yansıtılır.
Varsayılan harita hareketlerini devre dışı bırak
Haritada varsayılan hareketleri devre dışı bırakmak için GMSMapView
öğesinin bir özelliği
olarak kullanılabilen GMSUISettings
sınıfının özelliklerini
ayarlayabilirsiniz.
Aşağıdaki hareketler programatik olarak etkinleştirilebilir ve devre dışı bırakılabilir. Hareketi devre dışı bırakmanın, kamera ayarlarına programatik erişimi sınırlamayacağını unutmayın.
scrollGestures
: Kaydırma hareketlerinin etkinleştirileceğini veya devre dışı bırakılacağını kontrol eder. Etkinleştirilirse kullanıcılar kamerayı kaydırmak için ekranı kaydırabilir.zoomGestures
: Yakınlaştırma hareketlerinin etkinleştirileceğini veya devre dışı bırakılacağını kontrol eder. Etkinse kullanıcılar kamerayı yakınlaştırmak için iki kez dokunabilir, iki parmakla dokunabilir veya iki parmağını yakınlaştırabilir.scrollGestures
etkinken iki kez dokunma veya sıkıştırma hareketinin kamerayı belirtilen noktaya kaydırabileceğini unutmayın.tiltGestures
- Eğme hareketlerinin etkinleştirilip devre dışı bırakılacağını kontrol eder. Bu özellik etkinleştirilirse kullanıcılar kamerayı eğmek için iki parmakla dikey olarak aşağı veya yukarı kaydırabilir.rotateGestures
— Döndürme hareketlerinin etkinleştirilip etkinleştirilmediğini kontrol eder. Bu özellik etkinleştirilirse kullanıcılar iki parmakla döndürme hareketini kullanarak kamerayı döndürebilir.
Bu örnekte hem kaydırma hem de yakınlaştırma hareketleri devre dışı bırakılmıştır.
Swift
mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false
Objective-C
mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;
Konum kontrolleri ve kullanıcı arayüzü öğeleri
Aşağıdaki özellikleri kullanarak kontrolleri ve diğer kullanıcı arayüzü öğelerini gezinme üst bilgisi ve alt bilgisinin konumuna göre konumlandırabilirsiniz:
navigationHeaderLayoutGuide
navigationFooterLayoutGuide
Aşağıdaki kod örneğinde, harita görünümünde bir çift etiketi konumlandırmak için düzen kılavuzlarının kullanılması gösterilmektedir:
Swift
/* Add a label to the top left, positioned below the header. */
let topLabel = UILabel()
topLabel.text = "Top Left"
mapView.addSubview(topLabel)
topLabel.translatesAutoresizingMaskIntoConstraints = false
topLabel.topAnchor.constraint(equalTo: mapView.navigationHeaderLayoutGuide.bottomAnchor).isActive = true
topLabel.leadingAnchor.constraint(equalTo: mapView.leadingAnchor).isActive = true
/* Add a label to the bottom right, positioned above the footer. */
let bottomLabel = UILabel()
bottomLabel.text = "Bottom Right"
mapView.addSubview(bottomLabel)
bottomLabel.translatesAutoresizingMaskIntoConstraints = false
bottomLabel.bottomAnchor.constraint(equalTo: mapView.navigationFooterLayoutGuide.topAnchor).isActive = true
bottomLabel.trailingAnchor.constraint(equalTo: mapView.trailingAnchor).isActive = true
Objective-C
/* Add a label to the top left, positioned below the header. */
UILabel *topLabel = [[UILabel alloc] init];
topLabel.text = @"Top Left";
[view addSubview:topLabel];
topLabel.translatesAutoresizingMaskIntoConstraints = NO;
[topLabel.topAnchor
constraintEqualToAnchor:mapView.navigationHeaderLayoutGuide.bottomAnchor].active = YES;
[topLabel.leadingAnchor constraintEqualToAnchor:mapView.leadingAnchor].active = YES;
/* Add a label to the bottom right, positioned above the footer. */
UILabel *bottomLabel = [[UILabel alloc] init];
bottomLabel.text = @"Bottom Right";
[view addSubview:bottomLabel];
bottomLabel.translatesAutoresizingMaskIntoConstraints = NO;
[bottomLabel.bottomAnchor
constraintEqualToAnchor:mapView.navigationFooterLayoutGuide.topAnchor].active = YES;
[bottomLabel.trailingAnchor constraintEqualToAnchor:mapView.trailingAnchor].active = YES;
Alternatif rotaları gizle
Kullanıcı arayüzü çok fazla bilgiyle karıştığında, varsayılandan (iki) daha az alternatif rota görüntüleyerek veya hiç alternatif rota göstermeyerek karmaşıklığı azaltabilirsiniz. Bu seçeneği, rotaları getirmeden önce GMSNavigationRoutingOptions
yapılandırarak ve alternateRoutesStrategy
için aşağıdaki numaralandırma değerlerinden biriyle ayarlayarak yapılandırabilirsiniz:
Sıralama Değeri | Açıklama |
---|---|
GMSGezinmeAlternatif RotalarStratejileri | Varsayılan. En fazla iki alternatif rota görüntülenir. |
GMSGezinmeAlternatif RotalarStratejisiOne | Bir alternatif rota (varsa) görüntüler. |
GMSNavigationAlternateRoutesStrategyNone | Alternatif rotaları gizler. |
Örnek
Aşağıdaki kod örneğinde, alternatif rotaların tamamen nasıl gizleneceği gösterilmektedir.
Swift
let routingOptions = GMSNavigationRoutingOptions(alternateRoutesStrategy: .none)
navigator?.setDestinations(destinations,
routingOptions: routingOptions) { routeStatus in
...
}
Objective-C
GMSNavigationRoutingOptions *routingOptions = [[GMSNavigationRoutingOptions alloc] initWithAlternateRoutesStrategy:GMSNavigationAlternateRoutesStrategyNone];
[navigator setDestinations:destinations
routingOptions:routingOptions
callback:^(GMSRouteStatus routeStatus){...}];