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

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

更新时间:2017年11月06日

导航界面中的ui元素都支持自定义,通过自定义,可以做出你想要的导航界面效果。

自定义路段

1、关闭自动绘制路线。

AMapNaviViewOptions options = mAMapNaviView.getViewOptions();
//关闭自动绘制路线(如果你想自行绘制路线的话,必须关闭!!!)
options.setAutoDrawRoute(false);
mAMapNaviView.setViewOptions(options);

2、调用 RouteOverLay 类的 addToMap() 方法设置绘制路线的参数,并将路线添加到地图上,完成导航路段的自定义。

核心的方法如下表:

方法名

参数说明

返回值说明

方法效果

默认值

addToMap(BitmapDescriptor[] routeResource, int[] index)

routeResource:用户自定义的各路段的纹理资源;

index:用来间隔各路段的索引数组;

void

将routeOverlay添加到地图上。


addToMap(int[] color, int[] index)

color:用户自定义的各路段的颜色。

index:用来间隔各路段的索引数组。

void

将routeOverlay添加到地图上。


setStartPointBitmap(Bitmap bitmap)

bitmap:起始点的bitmap。

void

设置起点的bitmap。

默认的起点bitmap是蓝色水滴,带有“起”字。

setEndPointBitmap(Bitmap bitmap)

bitmap:结束点的bitmap。

void

设置结束点的bitmap。

默认的起点bitmap是红色水滴,带有“终”字。

setWayPointBitmap(Bitmap bitmap)

bitmap:途经点的bitmap。

void

设置途经点点的bitmap。

默认的途经点bitmap是橘色水滴,带有“经”字。

RouteOverLay routeOverlay = new RouteOverLay(mAMapNaviView.getMap(), mAMapNavi.getNaviPath(), this);
//设置起点的图标
routeOverlay.setStartPointBitmap(BitmapFactory.decodeResource(this.getResources(), R.drawable.r1));
//设置终点的图标
routeOverlay.setEndPointBitmap(BitmapFactory.decodeResource(this.getResources(), R.drawable.b1));
//设置途经点的图标
routeOverlay.setWayPointBitmap(BitmapFactory.decodeResource(this.getResources(), R.drawable.b2));
try {
    routeOverlay.setWidth(30);
} catch (AMapNaviException e) {
//宽度须>0
    e.printStackTrace();
}
int color[] = new int[10];
color[0] = Color.BLACK;
color[1] = Color.RED;
color[2] = Color.BLUE;
color[3] = Color.YELLOW;
color[4] = Color.GRAY;
//以途径点的index分隔,用不同的颜色绘制路段
routeOverlay.addToMap(color, mAMapNavi.getNaviPath().getWayPointIndex());

自定义路线纹理

路线纹理有两种状态:

1、未开路况时,默认的是蓝色带箭头的纹理。

2、开启路况时,由不同路况(未知/畅通/缓慢/拥堵/严重拥堵)的纹理以及路段上的箭头纹理构成。

注意:通过 AMapNaviViewOptions 的 setTrafficLine(boolean enabled) 方法控制路线的路况,默认是开启路况的。

RouteOverlayOptions主要用于设置路线的纹理参数,核心方法见下表:

方法名

参数说明

返回值说明

方法效果

默认值

setNormalRoute(Bitmap normalRoute)

normalRoute:默认的路线纹理位图。

void

设置默认的路线纹理位图(未开启路况时)。







setArrowOnTrafficRoute(Bitmap arrowOnTrafficRoute)

arrowOnTrafficRoute:『小箭头』图标的纹理位图。

void

设置浮于道路上的『小箭头』图标的纹理位图。


setUnknownTraffic(Bitmap unknownTraffic)

unknownTraffic:未知路况下的纹理位图。

void

设置未知路况下的纹理位图。


setSmoothTraffic(Bitmap smoothTraffic)

smoothTraffic:畅通路况下的纹理位图。

void

设置畅通路况下的纹理位图。


setSlowTraffic(Bitmap slowTraffic)

slowTraffic:缓慢路况下的纹理位图。

void

设置缓慢路况下的纹理位图。


setJamTraffic(Bitmap jamTraffic)

unknownTraffic:拥堵路况的纹理位图。

void

设置拥堵路况下的纹理位图。


setVeryJamTraffic(Bitmap veryJamTraffic)

veryJamTraffic:严重拥堵路况下的纹理位图。<。

void

设置严重拥堵路况下的纹理位图。


示例代码如下:

AMapNaviViewOptions options = mAMapNaviView.getViewOptions();

RouteOverlayOptions routeOverlayOptions = new RouteOverlayOptions();

routeOverlayOptions.setNormalRoute(BitmapFactory.decodeResource(getResources(), R.drawable.custtexture));  routeOverlayOptions.setArrowOnTrafficRoute(BitmapFactory.decodeResource(getResources(),R.drawable.custtexture_aolr));              routeOverlayOptions.setUnknownTraffic(BitmapFactory.decodeResource(getResources(),R.drawable.custtexture_no));
routeOverlayOptions.setSmoothTraffic(BitmapFactory.decodeResource(getResources(), R.drawable.custtexture_green));
routeOverlayOptions.setSlowTraffic(BitmapFactory.decodeResource(getResources(), R.drawable.custtexture_slow));
routeOverlayOptions.setJamTraffic(BitmapFactory.decodeResource(getResources(), R.drawable.custtexture_bad));
routeOverlayOptions.setVeryJamTraffic(BitmapFactory.decodeResource(getResources(), R.drawable.custtexture_grayred));
        
options.setRouteOverlayOptions(routeOverlayOptions);

mAMapNaviView.setViewOptions(options);

自定义路口放大图

路口放大图的默认大小是200*200,在导航面的上方居中充满显示。自定义路口放大图提供修改路口放大图位置和大小的功能。

Android导航SDK提供了路口放大图View对象——ZoomInIntersectionView(ImageView),通过设置该对象参数,控制路口放大图的显示位置和显示大小。

显示路口放大图自定义的步骤如下:

第 1 步,定义ZoomInIntersectionView对象,设置该对象布局。

<com.amap.api.navi.view.ZoomInIntersectionView
    android:id="@+id/myZoomInIntersectionView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_alignParentTop="true"
    />

第 2 步,创建ZoomInIntersectionView实例。

private ImageView mZoomInIntersectionView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ……
    mZoomInIntersectionView = (ImageView) findViewById(R.id.myZoomInIntersectionView);
    ……

}

第 3 步,在showCross()回调函数中获取路口放大图,并显示其可见;在hideCross()回调函数中设置路口放大图不可见。

@Override
public void showCross(AMapNaviCross aMapNaviCross) {
    mZoomInIntersectionView.setImageBitmap(aMapNaviCross.getBitmap());
    mZoomInIntersectionView.setVisibility(View.VISIBLE);
}

@Override
public void hideCross() {
    mZoomInIntersectionView.setVisibility(View.INVISIBLE);
}

自定义导航光柱

根据路段的路况和距离,显示规划路径整体路况展示图。

实时交通信息路况光柱图View类为TrafficProgressBar,自定义导航光柱有以下两个步骤:

1、定义TrafficProgressBar,并获取该对象;

<com.amap.api.navi.view.TrafficProgressBar
    android:id="@+id/myTrafficBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    />


2、通过 findViewById 方式获取该对象。

@Override
protected void onCreate(Bundle savedInstanceState) {
    ……

    //设置布局完全不可见
    AMapNaviViewOptions viewOptions = mAMapNaviView.getViewOptions();
    viewOptions.setLayoutVisible(false);
    //主动隐藏导航光柱
    viewOptions.setTrafficBarEnabled(false);
    ……

    mTrafficProgressBar = (TrafficProgressBar) findViewById(R.id.myTrafficBar);
}

3、设置导航光柱的参数,核心的方法见下表:

方法名

参数说明

返回值说明

方法效果

update(java.util.List tmcSection, int routeDis)

tmcSection:路况list。

routeDis:全部距离。

void

根据路况更新导航光柱。

setTmcBarHeightWhenLandscape(double percent)

percent:相对于原始高度的百分比(范围:0.1-1)。

void

设置当横屏时导航光柱条的高度。

setTmcBarHeightWhenPortrait(double percent)

percent:相对于原始高度的百分比(范围:0.1-1)。

void

设置当竖屏时导航光柱条的高度。

setUnknownTrafficColor(int unknownTrafficColor)

unknownTrafficColor:未知路况的颜色值。

void

设置导航光柱条上的未知路况的颜色。

setSmoothTrafficColor(int smoothTrafficColor)

smoothTrafficColor:畅通路况的颜色值。

void

设置导航光柱条上的畅通路况的颜色。

setSlowTrafficColor(int slowTrafficColor)

slowTrafficColor:缓慢路况的颜色值。

void

设置导航光柱条上的缓慢路况的颜色。

setJamTrafficColor(int jamTrafficColor)

jamTrafficColor:拥堵路况的颜色值。

void

设置导航光柱条上的拥堵路况的颜色。

setVeryJamTrafficColor(int veryJamTrafficColor)

veryJamTrafficColor:严重拥堵路况的颜色值。

void

设置导航光柱条上的严重拥堵路况的颜色。

//设置布局完全不可见
AMapNaviViewOptions viewOptions = mAMapNaviView.getViewOptions();
viewOptions.setLayoutVisible(false);
//主动隐藏蚯蚓线
viewOptions.setTrafficBarEnabled(false);
//可以自由设置自车位置,第一个参数为在宽的百分之多少处
//第二个参数为在高的百分之多少处
viewOptions.setPointToCenter(1.0 / 2, 1.0 / 2);
viewOptions.setTilt(0);
mAMapNaviView.setViewOptions(viewOptions);
mAMapNaviView.setAMapNaviViewListener(this);


mTrafficProgressBar = (TrafficProgressBar) findViewById(R.id.myTrafficBar);
//设置原始高度的百分比,其中若值<0.1 则用0.1 若值>1 则用1

mTrafficProgressBar.setUnknownTrafficColor(Color.WHITE);
mTrafficProgressBar.setSmoothTrafficColor(Color.GREEN);
mTrafficProgressBar.setSlowTrafficColor(Color.YELLOW);
mTrafficProgressBar.setJamTrafficColor(Color.DKGRAY);
mTrafficProgressBar.setVeryJamTrafficColor(Color.BLACK);

自定义自车

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

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

自定义自车的示例代码如下:

AMapNaviViewOptions options = mAMapNaviView.getViewOptions();
options.setCarBitmap(BitmapFactory.decodeResource(this.getResources(), R.drawable.b1));
options.setFourCornersBitmap(BitmapFactory.decodeResource(this.getResources(), R.drawable.lane00));
mAMapNaviView.setViewOptions(options);

自定义全览按钮

通过全览按钮,可以查看整条导航路线的情况。自定义全览按钮相当于更改全览按钮图片。

<com.amap.api.navi.view.OverviewButtonView
    android:id="@+id/myOverviewButtonView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    ></com.amap.api.navi.view.OverviewButtonView>
private OverviewButtonView mOverviewButtonView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    ……
    mOverviewButtonView = (OverviewButtonView) findViewById(R.id.myOverviewButtonView);
    ……

    //设置布局完全不可见
    AMapNaviViewOptions options = mAMapNaviView.getViewOptions();
    options.setLayoutVisible(false);
    mAMapNaviView.setViewOptions(options);

    mAMapNaviView.setLazyOverviewButtonView(mOverviewButtonView);
}

自定义指南针

private DirectionView mDirectionView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    ……

    //设置布局完全不可见
    com.amap.api.navi.AMapNaviViewOptions options = mAMapNaviView.getViewOptions();
    options.setLayoutVisible(false);
    mAMapNaviView.setViewOptions(options);

    mDirectionView = (DirectionView) findViewById(R.id.myDirectionView);
    mAMapNaviView.setLazyDirectionView(mDirectionView);
}

自定义路况按钮

<com.amap.api.navi.view.TrafficButtonView
    android:id="@+id/myTrafficButtonView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    ></com.amap.api.navi.view.TrafficButtonView>

private TrafficButtonView mTrafficButtonView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ……
        mTrafficButtonView = (TrafficButtonView) findViewById(R.id.myTrafficButtonView);
        mAMapNaviView = (com.amap.api.navi.AMapNaviView) findViewById(R.id.navi_view);
        ……

        //设置布局完全不可见
        com.amap.api.navi.AMapNaviViewOptions options = mAMapNaviView.getViewOptions();
        options.setLayoutVisible(false);
        mAMapNaviView.setViewOptions(options);

        mAMapNaviView.setLazyTrafficButtonView(mTrafficButtonView);
    }

自定义放大缩小按钮

<com.amap.api.navi.view.ZoomButtonView
    android:id="@+id/myZoomButtonView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    ></com.amap.api.navi.view.ZoomButtonView>       

private ZoomButtonView mZoomButtonView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    ……
    mZoomButtonView = (ZoomButtonView) findViewById(R.id.myZoomButtonView);
    ……;

    //设置布局完全不可见
    AMapNaviViewOptions options = mAMapNaviView.getViewOptions();
    options.setLayoutVisible(false);
    mAMapNaviView.setViewOptions(options);

    mAMapNaviView.setLazyZoomButtonView(mZoomButtonView);
}

自定义转向图标


1、下载SDK默认的转向图标,将这些图标改成适合您 APP 样式的 icon。注意:图标的名称不能更改。

2、在用户导航页面中添加 NextTurnTipView 类,如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

    <com.amap.api.navi.AMapNaviView
        android:id="@+id/navi_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />


    <com.amap.api.navi.view.NextTurnTipView
        android:id="@+id/myDirectionView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        ></com.amap.api.navi.view.NextTurnTipView>

</RelativeLayout>

3、在 AMapNaviView 初始化的时候,通过 findViewById 方式找到自定义的 NextTurnView,并设置到 AMapNaviView 中,同时调用自定义方法设置图片数组,并隐藏SDK默认的布局。代码如下:

 //定义转向图标的数组
private int[] customIconTypes = {R.drawable.sou2, R.drawable.sou3,
        R.drawable.sou4, R.drawable.sou5, R.drawable.sou6, R.drawable.sou7,
        R.drawable.sou8, R.drawable.sou9, R.drawable.sou10,
        R.drawable.sou11, R.drawable.sou12, R.drawable.sou13,
        R.drawable.sou14, R.drawable.sou15, R.drawable.sou16,
        R.drawable.sou17, R.drawable.sou18, R.drawable.sou19,
};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_activity);
    naviView = (AMapNaviView) findViewById(R.id.mapview);
    NextTurnTipView myNextTurnView = (NextTurnTipView) findViewById(R.id.myNextTurnView);
    //设置自定义UI样式,这个是修改样式后的图片ID数组
    myNextTurnView.setCustomIconTypes(getResources(),customIconTypes);
    //设置自定义的NextTurnTipView到AMapNaviView中,使其生效
    naviView.setLazyNextTurnTipView(myNextTurnView);
    naviView.setAMapNaviViewListener(this);
    naviView.onCreate(savedInstanceState);
    AMapNaviViewOptions options = naviView.getViewOptions();
    //隐藏SDK默认的布局
    options.setLayoutVisible(false);
    naviView.setViewOptions(options);
 }

正北模式

mAMapNaviView.setNaviMode(AMapNaviView.NORTH_UP_MODE);
mAMapNaviView.setNaviMode(AMapNaviView.CAR_UP_MODE);
示例中心 功能
在线体验
常见问题