自定义UI控件 最后更新时间: 2026年05月29日

单元素自定义

可以通过AMapNaviViewOptions中如下接口进行单UI元素显示隐藏，只列出部分接口，更多功能请参考AMapNaviViewOptions类。 

、	/**
	 * 设置菜单按钮是否在导航界面显示。
	 *
	 * @param enabled 菜单按钮是否在导航界面显示。true代表显示，false代表不显示。
	 */
	public setSettingMenuEnabled(enabled: boolean):  void {
		this.isSettingMenuEnabled = enabled;
	}
    	/**
	 * 设置导航界面是否显示路线全览按钮。
	 *
	 * @param isShow 设置全览按钮是否在导航界面显示，默认显示。true，显示；false，隐藏。
	 */
	public setRouteListButtonShow(isShow: boolean):  void {
		this.isRouteListButtonShow = isShow;
	}

整体UI自定义

如上图所示，我们可以通过AMapNaviViewOptions中如下接口，来一键控制所有 UI 控件的显示和隐藏。 

	/**
	 * 设置导航界面UI是否显示。
	 * 注意：<font color='red'>该接口会同时隐藏模型放大图和实景放大图，隐藏后可以通过{@link AMapModeCrossOverlay}绘制放大图</font>
	 * @param isLayoutVisible true导航界面显示，false导航界面不显示。
	 */
	public setLayoutVisible(isLayoutVisible: boolean):  void {
		this.isLayoutVisible = isLayoutVisible;
	}

当不显示UI时，地图锚点也可以通过AMapNaviViewOptions进行自定义，可以根据自己的UI布局来调整比例尺的位置和锁车态时自车图标的默认显示位置，接口如下：

	/**
	 * 设置自车位置锁定在屏幕中的位置
	 *
	 * @param x 取值范围：0-1 在x轴的位置，百分比
	 * @param y 取值范围：0-1 在y轴的位置，百分比
	 * @since 2.2.3
	 */
	public setPointToCenter(x: number, y: number):  void {
		this.mapCenterX = x;
		this.mapCenterY = y;
	}

借助导航提供的View（DriveWay、CrossImage、CustomTrafficProgressBar、TrafficButtonView、PreviewRouteButton等），组装自己的导航界面。

创建AMapNaviComponent以后设置appCustomerConfig中调用一下方法。

 /**
   * 设置用户自定义的车道线
   * @param lazyDriveWayView
   * @since 2.2.3
   */
  setLazyDriveWayView?: ()=> void
    /**
   * 设置自定义的路口放大图
   *
   * @param zoomInIntersectionView
   * @since 2.2.3
   */
  setLazyZoomInIntersectionView?: ()=>void
    /**
   * 设置自定义的路况按钮视图
   *
   * @param lazyTrafficButtonView
   * @since 2.2.3
   */
  setLazyTrafficButtonView?:() => void
    /**
   * 设置用户自定义的全览按钮
   *
   * @param lazyOverviewButtonView
   */
  setLazyOverviewButtonView?:() => void
   /**
   * 设置用户自定义的导航光柱条View
   * <br>
   * 设置自定义的光柱条view，只需要设置位置和宽、高即可，颜色车标等元素，导航SDK内部会帮助进行更新操作。
   *
   * @param lazyTrafficProgressBarView
   * @since 2.2.3
   */
  setLazyTrafficProgressBarView?: ()=>void