示例中心
功能在线体验
控制台

高德 开发 iOS 导航SDK 开发指南 在地图上导航 导航UI定制化

更新时间:2017年02月06日

导航界面 AMapNaviDriveView 或 AMapNaviWalkView 中的 UI 控件(如:缩放按钮、路口放大图、导航路线等等)都支持定制化更改,以便您做出独一无二的导航界面。

自定义交通路线 Polyline

基本介绍

开启路况时,由不同路况(未知/畅通/缓慢/拥堵/严重拥堵)的纹理构成路线,通过 AMapNaviDriveView 的 statusTextures 属性设置各种路况的纹理图片。

注意:通过 AMapNaviDriveView 的 showTrafficLayer 控制是否显示路况,默认是开启的。

使用说明

自定义交通路线 Polyline 的步骤如下:

1、隐藏导航元素,以展示自定义的效果。

//可以将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
[self.driveView setShowUIElements:NO];
driveView.showUIElements = false 

2、设置实时交通路线的样式。

//自定义实时交通路线Polyline的样式
[self.driveView setLineWidth:8];
[self.driveView setStatusTextures:@{@(AMapNaviRouteStatusUnknow): [UIImage imageNamed:@"arrowTexture0"],
                                            @(AMapNaviRouteStatusSmooth): [UIImage imageNamed:@"arrowTexture1"],
                                            @(AMapNaviRouteStatusSlow): [UIImage imageNamed:@"arrowTexture2"],
                                            @(AMapNaviRouteStatusJam): [UIImage imageNamed:@"arrowTexture3"],
                                            @(AMapNaviRouteStatusSeriousJam): [UIImage imageNamed:@"arrowTexture4"],}];
driveView.lineWidth = 8
driveView.statusTextures = [NSNumber(value: AMapNaviRouteStatus.unknow.rawValue): UIImage(named: "arrowTexture0")!,
                            NSNumber(value: AMapNaviRouteStatus.smooth.rawValue): UIImage(named: "arrowTexture1")!,
                            NSNumber(value: AMapNaviRouteStatus.slow.rawValue): UIImage(named: "arrowTexture2")!,
                            NSNumber(value: AMapNaviRouteStatus.jam.rawValue): UIImage(named: "arrowTexture3")!,
                            NSNumber(value: AMapNaviRouteStatus.seriousJam.rawValue): UIImage(named: "arrowTexture4")!]

自定义路线 Polyline

当关闭路况时,默认的路线是蓝色箭头纹理的路线,有两种自定义的自定义方式。

方式一

仅更改默认的纹理图片,通过 AMapNaviDriveView 的 normalTexture 设置。

[self.driveView setNormalTexture:[UIImage imageNamed:@"normalTexture"]];
driveView.normalTexture = [UIImage(named: "normalTexture")!];

方式二

根据分段,以不同的颜色或者纹理设置路线。

实现步骤如下:

1、调用 AMapNaviDriveView 的 setShowUIElements 方法,将导航界面元素隐藏。

- (void)initDriveView
{
    if (self.driveView == nil)
    {
        self.driveView = [[AMapNaviDriveView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 450)];
        [self.driveView setDelegate:self];
        
        //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
        [self.driveView setShowUIElements:NO];
        
        //关闭路况显示,以展示自定义Polyline的样式
        [self.driveView setShowTrafficLayer:NO];
        
        [self.view addSubview:self.driveView];
    }
}
func initDriveView() {
    driveView = AMapNaviDriveView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 450))
    driveView.delegate = self
    
    //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
    driveView.showUIElements = false
    
    //关闭路况显示,以展示自定义Polyline的样式
    driveView.showTrafficLayer = false
    
    view.addSubview(driveView)
}

2、在 needUpdatePolylineOptionForRoute 回调中,设置路线的分段,并设置每段对应的颜色或纹理。

- (AMapNaviRoutePolylineOption *)driveView:(AMapNaviDriveView *)driveView needUpdatePolylineOptionForRoute:(AMapNaviRoute *)naviRoute
{
    //自定义普通路线Polyline的样式
    AMapNaviRoutePolylineOption *polylineOption = [[AMapNaviRoutePolylineOption alloc] init];
    polylineOption.lineWidth = 8;
    polylineOption.drawStyleIndexes = [NSArray arrayWithArray:naviRoute.wayPointCoordIndexes];
    polylineOption.replaceTrafficPolyline = NO;
    
    //可以使用颜色填充,也可以使用纹理图片(当同时设置时,strokeColors设置将被忽略)
    polylineOption.strokeColors = @[[UIColor purpleColor], [UIColor brownColor], [UIColor orangeColor]];
    //polylineOption.textureImages = @[[UIImage imageNamed:@"arrowTexture2"], [UIImage imageNamed:@"arrowTexture3"], [UIImage imageNamed:@"arrowTexture4"]];
    
    return polylineOption;
}
func driveView(_ driveView: AMapNaviDriveView, needUpdatePolylineOptionFor naviRoute: AMapNaviRoute) -> AMapNaviRoutePolylineOption {
    //自定义普通路线Polyline的样式
    let polylineOption = AMapNaviRoutePolylineOption()
    polylineOption.lineWidth = 8
    polylineOption.drawStyleIndexes = naviRoute.wayPointCoordIndexes
    polylineOption.replaceTrafficPolyline = false
    
    //可以使用颜色填充,也可以使用纹理图片(当同时设置时,strokeColors设置将被忽略)
    polylineOption.strokeColors = [UIColor.purple, UIColor.brown, UIColor.orange]
    //polylineOption.textureImages = [UIImage(named: "arrowTexture2")!,UIImage(named: "arrowTexture3")!,UIImage(named: "arrowTexture4")!]
    
    return polylineOption
}

自定义路口放大图

路口放大图的默认大小是400*400,在导航面的上方居中充满显示。通过 showCrossImage 回调函数获取路口放大图的图片,在 View 合适的位置显示。

1、调用 AMapNaviDriveView 的 setShowUIElements 方法,将导航界面元素隐藏。

- (void)initDriveView
{
    if (self.driveView == nil)
    {
        self.driveView = [[AMapNaviDriveView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 450)];
        [self.driveView setDelegate:self];
       
        //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
        [self.driveView setShowUIElements:NO];
        
        [self.view addSubview:self.driveView];
    }
}
func initDriveView() {
    driveView = AMapNaviDriveView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 400))
    driveView.delegate = self
    
    //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
    driveView.showUIElements = false
    
    view.addSubview(driveView)
}

2、在 showCrossImage 回调中,获取到路口放大图显示出来,在 driveManagerHideCrossImage 回调隐藏路口放大图。

- (void)driveManager:(AMapNaviDriveManager *)driveManager showCrossImage:(UIImage *)crossImage
{
    NSLog(@"showCrossImage");
    
    //显示路口放大图
    [self.crossImageView setImage:crossImage];
}

- (void)driveManagerHideCrossImage:(AMapNaviDriveManager *)driveManager
{
    NSLog(@"hideCrossImage");
    
    //隐藏路口放大图
    [self.crossImageView setImage:nil];
}
func driveManager(_ driveManager: AMapNaviDriveManager, showCross crossImage: UIImage) {
        NSLog("showCrossImage")
        
        //显示路口放大图
        crossImageView.image = crossImage
    }
    
    func driveManagerHideCrossImage(_ driveManager: AMapNaviDriveManager) {
        NSLog("hideCrossImage")
        
        //隐藏路口放大图
        crossImageView.image = nil
    }

自定义自车

自车由蓝色箭头图标和方向罗盘图标组合构成。自定义自车相当设置图片去替换蓝色箭头图标和方向罗盘图标。

注意:方向罗盘图标的方向朝上(即:指北),否则会导致导航过程中方向显示不正确。

在初始化 AMapNaviDriveView 时自定义自车,示例代码如下:

- (void)initDriveView
{
    if (self.driveView == nil)
    {
        self.driveView = [[AMapNaviDriveView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 450)];
        [self.driveView setDelegate:self];
        
        //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
        [self.driveView setShowUIElements:NO];
        
        //设置自定义的Car图标和CarCompass图标
        [self.driveView setCarImage:[UIImage imageNamed:@"customCar"]];
        [self.driveView setCarCompassImage:[UIImage imageNamed:@"customCompass"]];
        
        [self.view addSubview:self.driveView];
    }
}
func initDriveView() {
    driveView = AMapNaviDriveView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 450))
    driveView.delegate = self
    
    //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
    driveView.showUIElements = false
    
    //设置自定义的Car图标和CarCompass图标
    driveView.setCarImage(UIImage(named: "customCar"))
    driveView.setCarCompassImage(UIImage(named: "customCompass"))
    
    view.addSubview(driveView)
}

自定义全览按钮

通过 AMapNaviDriveView 的 setShowMode 方法设置地图的显示模式,可实现全览按钮的功能。

1、调用 AMapNaviDriveView 的 setShowUIElements 方法,将导航界面元素隐藏。

- (void)initDriveView
{
    if (self.driveView == nil)
    {
        self.driveView = [[AMapNaviDriveView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 450)];
        [self.driveView setDelegate:self];
       
        //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
        [self.driveView setShowUIElements:NO];
        
        [self.view addSubview:self.driveView];
    }
}
func initDriveView() {
    driveView = AMapNaviDriveView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 400))
    driveView.delegate = self
    
    //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
    driveView.showUIElements = false
    
    view.addSubview(driveView)
}

2、实现全览按钮功能。

- (void)showModeAction:(UISegmentedControl *)sender
{
    //改变界面的显示模式
    switch (sender.selectedSegmentIndex)
    {
        case 0:
            [self.driveView setShowMode:AMapNaviDriveViewShowModeCarPositionLocked];//锁车状态
            break;
        case 1:
            [self.driveView setShowMode:AMapNaviDriveViewShowModeOverview];//全览状态
            break;
        case 2:
            [self.driveView setShowMode:AMapNaviDriveViewShowModeNormal];//普通状态
            break;
        default:
            break;
    }
}
func showModeAction(sender: UISegmentedControl) {
       //改变界面的显示模式
       switch sender.selectedSegmentIndex {
       case 0:
           driveView.showMode = .carPositionLocked
       case 1:
           driveView.showMode = .overview
       case 2:
           driveView.showMode = .normal
       default:
           break
       }
   }

自定义路况按钮

在地图上的合适位置添加一个Button,通过 AMapNaviDriveView 的 setShowTrafficLayer 方法控制路况。

1、调用 AMapNaviDriveView 的 setShowUIElements 方法,将导航界面元素隐藏。

- (void)initDriveView
{
    if (self.driveView == nil)
    {
        self.driveView = [[AMapNaviDriveView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 450)];
        [self.driveView setDelegate:self];
       
        //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
        [self.driveView setShowUIElements:NO];
        
        [self.view addSubview:self.driveView];
    }
}
func initDriveView() {
    driveView = AMapNaviDriveView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 400))
    driveView.delegate = self
    
    //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
    driveView.showUIElements = false
    
    view.addSubview(driveView)
}

2、实现路况按钮功能。

- (void)trafficLayerAction
{
    //是否显示实时交通路况
    [self.driveView setShowTrafficLayer:!self.driveView.showTrafficLayer];
}
func trafficLayerAction() {
    //是否显示实时交通路况
    driveView.showTrafficLayer = !driveView.showTrafficLayer
}

自定义放大缩小按钮

通过 AMapNaviDriveView 的 mapZoomLevel 设置缩放级别,从而实现放大和缩小按钮的功能。

1、调用 AMapNaviDriveView 的 setShowUIElements 方法,将导航界面元素隐藏。

- (void)initDriveView
{
    if (self.driveView == nil)
    {
        self.driveView = [[AMapNaviDriveView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 450)];
        [self.driveView setDelegate:self];
       
        //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
        [self.driveView setShowUIElements:NO];
        
        [self.view addSubview:self.driveView];
    }
}
func initDriveView() {
    driveView = AMapNaviDriveView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 400))
    driveView.delegate = self
    
    //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
    driveView.showUIElements = false
    
    view.addSubview(driveView)
}

2、实现放大按钮功能。

- (void)zoomInAction
{
    //改变地图的zoomLevel,会进入非锁车状态
    self.driveView.mapZoomLevel = self.driveView.mapZoomLevel+1;
}
func zoomInAction() {
    //改变地图的zoomLevel,会进入非锁车状态
    driveView.mapZoomLevel = driveView.mapZoomLevel + 1
}

3、实现缩小按钮功能。

- (void)zoomOutAction
{
    //改变地图的zoomLevel,会进入非锁车状态
    self.driveView.mapZoomLevel = self.driveView.mapZoomLevel-1;
}
func zoomOutAction() {
    //改变地图的zoomLevel,会进入非锁车状态
    driveView.mapZoomLevel = driveView.mapZoomLevel - 1
}

正北模式

地图有两种追踪模式————地图指北和车头指北,为了保证车头指北,地图会在旋转。

1、调用 AMapNaviDriveView 的 setShowUIElements 方法,将导航界面元素隐藏。

- (void)initDriveView
{
    if (self.driveView == nil)
    {
        self.driveView = [[AMapNaviDriveView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 450)];
        [self.driveView setDelegate:self];
       
        //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
        [self.driveView setShowUIElements:NO];
        
        [self.view addSubview:self.driveView];
    }
}
func initDriveView() {
    driveView = AMapNaviDriveView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 400))
    driveView.delegate = self
    
    //将导航界面的界面元素进行隐藏,然后通过自定义的控件展示导航信息
    driveView.showUIElements = false
    
    view.addSubview(driveView)
}

2、实现正北模式的功能。

- (void)trackingModeAction
{
    //改变地图的追踪模式
    if (self.driveView.trackingMode == AMapNaviViewTrackingModeCarNorth)
    {
        self.driveView.trackingMode = AMapNaviViewTrackingModeMapNorth;//地图指北
    }
    else if (self.driveView.trackingMode == AMapNaviViewTrackingModeMapNorth)
    {
        self.driveView.trackingMode = AMapNaviViewTrackingModeCarNorth;//车头指北
    }
}
func trackingModeAction() {
    //改变地图的追踪模式
    if driveView.trackingMode == .carNorth {
        driveView.trackingMode = .mapNorth
    }
    else if driveView.trackingMode == .mapNorth {
        driveView.trackingMode = .carNorth
    }
}

 

示例中心 功能
在线体验
常见问题