Android基于高德SDK的开发——自定义地图主题样式(悬浮按钮+底部弹窗)

本文介绍了如何在Android中基于高德SDK自定义地图样式,包括下载和使用高德提供的模板,使用SuspendButtonLayout悬浮按钮及BottomSheetDialog底部弹窗,提供地图样式切换功能。详细讲述了自定义地图样式、悬浮按钮的布局和活动调用,以及底部弹窗的实现方式。
摘要由CSDN通过智能技术生成

日常的地图使用中,平台一般只会给我们提供地图的标准样式,造成了一定程度上的审美疲劳,那么如何实现地图的自定义样式呢?本文使用Android Studio 4.1,给开发者提供了一个基于高德地图SDK进行地图样式设置的方法,在高德平台提供的自定义地图支持基础上,通过界面悬浮按钮+底部弹窗的方式,给用户更人性化的更换地图样式选择。

一、实现效果

实现效果:1、在地图主界面显示一个可移动、可扩展的悬浮按钮。点击按钮后可以弹出五个子按钮。
SuspendButtonLayout悬浮扩展按钮

2、点击其中一个子按钮,在底部弹出滑动表单,给用户提供几种可选择的地图样式。图为标准样式->马卡龙样式。

在这里插入图片描述
3、图为马卡龙样式->草木灰样式。
在这里插入图片描述
流程图示意:
flow chart

二、高德提供的自定义地图样式下载和使用

2.1自定义地图样式下载

对于自定义地图样式,高德提供了一些支持,可以点击高德自定义地图 查看详情。
下面简单描述一下绘制自定义地图或使用高德地图提供的模板的流程。
首先,在高德开放平台中注册登录并申请一个KEY(注意:一个地图APP只能对应一个KEY),将鼠标移动到在右上角的“我的”头像上,出现下拉框选项,选择自定义地图平台。
在这里插入图片描述
可以看到高德已经给我们提供了一些模板,我们可以在模板的基础之上进行编辑。点开任意一个模板,它就加入到了“我的自定义地图”中。此处以“马卡龙”模板作为示例。开发者可以调整河流、陆地等的颜色。
在这里插入图片描述
本示例中选用了标准、马卡龙、草色青和极夜蓝四种样式。编辑好后,点击使用与分享。
在这里插入图片描述
选择Android->离线调用地图样式->下载离线文件。(这里选择的SDK版本对应的是你下载的高德SDK版本)
在这里插入图片描述
在这里插入图片描述
下载后,将zip解压缩,每个样式都能得到style.data和style_extra.data两个文件。将每个文件重命名为对应的样式名称,以作区分。
standard-标准;macaron-马卡龙;grass-草木青;darkblue-极夜蓝。
在这里插入图片描述

2.2 在Android中的离线调用

首先在目录下建立一个assets文件夹。右键new->folder->assets folder即可。
在这里插入图片描述
然后,将上面下载并重命名好的8个样式文件放在assets文件夹中。

在这里插入图片描述
最后,就可以进行调用啦。本示例中新建了一个Mapui.java类将离线文件的调用方法进行封装。

//设置地图样式类
public class Mapui {
   

    //地图自定义样式数据文件路径
    public static String style_macaron = "style_macaron.data";
    public static String style_extra_macaron = "style_extra_macaron.data";
    public static String style_grass = "style_grass.data";
    public static String style_extra_grass = "style_extra_grass.data";
    public static String style_darkblue = "style_darkblue.data";
    public static String style_extra_darkblue = "style_extra_darkblue.data";
    public static String style_standard = "style_standard.data";
    public static String style_extra_standard = "style_extra_standard.data";

    public static void setAssetsStyle(AMap aMap, Context context, String style, String style_extra) {
   
        byte[] buffer1 = null;
        byte[] buffer2 = null;
        InputStream is1 = null;
        InputStream is2 = null;
        try {
   
            is1 = context.getAssets().open(style);
            int lenght1 = is1.available();
            buffer1 = new byte[lenght1];
            is1.read(buffer1);
            is2 = context.getAssets().open(style_extra);
            int lenght2 = is2.available();
            buffer2 = new byte[lenght2];
            is2.read(buffer2);
        } catch (IOException e) {
   
            e.printStackTrace();
        } finally {
   
            try {
   
                if (is1 != null)
                    is1.close();
                if (is2 != null)
                    is2.close();
            } catch (IOException e) {
   
                e.printStackTrace();
            }
        }
        CustomMapStyleOptions customMapStyleOptions = new CustomMapStyleOptions();
        customMapStyleOptions.setEnable(true);
        customMapStyleOptions.setStyleData(buffer1);
        customMapStyleOptions.setStyleExtraData(buffer2);
        aMap.setCustomMapStyle(customMapStyleOptions);
    }
}

三、SuspendButtonLayout悬浮扩展按钮的使用

有了自定义地图样式的封装类(输出),我们还需要有一个可以调用它的方法(输入)。因为该示例APP中除了自定义地图,还有其他基于高德SDK的功能,因此我考虑使用SuspendButtonLayout这样一个悬浮在地图上的可扩展按钮。
需要注意的是,SuspendButtonLayout是由AndroidX提供的(AndroidX是Google 2018 IO 大会推出的新扩展库,主要是对Android 支持库做了重大改进),而CSDN上大多数关于悬浮按钮的博客,都是使用了Android 支持的FloatingtActionButton。使用了AndroidX就不能同时使用Android。可在本文最后的参考博客中阅览二者的区别。

3.1 导入依赖包

在build.gradle(:app)中的dependencies中,加入一行:

implementation 'com.laocaixw.suspendbuttonlayout:suspendbuttonlayout:1.0.3'

3.2 xml布局

在MainActivity的xml布局中,主要含有两个组成部分:地图和悬浮按钮。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:suspend="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值