接入高德 SDK 遇到的问题 02:导航SDK中的某些View不显示

需求:接入高德导航SDK后,自定义导航页面,采用某些SDK按钮样式
问题:采用某些SDK自带的 View 时没有显示(比如:ZoomButtonView、TrafficButtonView)
解决:编制 xml 文件时,SDK自带的 View 要在 AMapNaviView 下面

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

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

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

    </LinearLayout>

        // TODO: 2017/12/21 自定义UI时要打开下面的代码设置
        /*AMapNaviViewOptions options = mAMapNaviView.getViewOptions();
        options.setLayoutVisible(false); // 除地图外不显示其它UI
        options.setAutoDrawRoute(true); // 自动绘制导航路线
        mAMapNaviView.setViewOptions(options);*/
        NextTurnTipView ntTurnIcon = (NextTurnTipView) findViewById(R.id.nt_turn_icon);
        mAMapNaviView.setLazyNextTurnTipView(ntTurnIcon); // 设置SDK的导航图标类型
        // TODO: 2017/12/21 xml 布局中 ZoomButtonView、TrafficButtonView 要在 AMapNaviView 下面
        ZoomButtonView zbZoom = (ZoomButtonView) findViewById(R.id.zb_zoom);
        mAMapNaviView.setLazyZoomButtonView(zbZoom); // 设置SDK的放大缩小按钮样式
        TrafficButtonView tb_traffic = (TrafficButtonView) findViewById(R.id.tb_traffic);
        mAMapNaviView.setLazyTrafficButtonView(tb_traffic); // 设置SDK的路况开关样式

ps:太奇葩了…

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是在uniapp接入高德地图导航sdk的代码示例: 1. 首先,在uniapp工程安装高德地图导航sdk插件,可以使用uni-app插件市场的插件或手动下载集成。 2. 在需要使用高德地图导航sdk的页面,引入高德地图导航sdk插件,并在页面mounted生命周期初始地图导航对象。 ``` <template> <view> <button @click="navigate">开始导航</button> </view> </template> <script> import amap from '@/uni_modules/amap-navigation/js_sdk/amap-wx.js'; export default { mounted() { // 初始地图导航对象 this.amapNavigation = new amap.AMapNavigation({ key: 'your amap key', version: '1.4.15', plugins: ['AMap.Geolocation'] }); }, methods: { navigate() { // 开始导航 this.amapNavigation.navigateTo({ destLatitude: this.destLatitude, destLongitude: this.destLongitude, destName: this.destName }); } } } </script> ``` 3. 在导航页面,使用高德地图导航sdk提供的API,实现导航功能。 ``` <template> <view> <button @click="back">返回</button> </view> </template> <script> import amap from '@/uni_modules/amap-navigation/js_sdk/amap-wx.js'; export default { mounted() { // 初始地图导航对象 this.amapNavigation = new amap.AMapNavigation({ key: 'your amap key', version: '1.4.15', plugins: ['AMap.Geolocation'] }); // 监听导航状态变 this.amapNavigation.on('routeChanged', (event) => { console.log('routeChanged', event); }); this.amapNavigation.on('naviInfoUpdated', (event) => { console.log('naviInfoUpdated', event); }); this.amapNavigation.on('naviExit', (event) => { console.log('naviExit', event); }); this.amapNavigation.on('error', (event) => { console.log('error', event); }); }, methods: { back() { // 结束导航 this.amapNavigation.stop(); // 返回上一页 uni.navigateBack(); } } } </script> ``` 以上是在uniapp接入高德地图导航sdk的代码示例,具体实现方式还需根据自己的业务需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值