日常的地图使用中,平台一般只会给我们提供地图的标准样式,造成了一定程度上的审美疲劳,那么如何实现地图的自定义样式呢?本文使用Android Studio 4.1,给开发者提供了一个基于高德地图SDK进行地图样式设置的方法,在高德平台提供的自定义地图支持基础上,通过界面悬浮按钮+底部弹窗的方式,给用户更人性化的更换地图样式选择。
目录
一、实现效果
实现效果:1、在地图主界面显示一个可移动、可扩展的悬浮按钮。点击按钮后可以弹出五个子按钮。
2、点击其中一个子按钮,在底部弹出滑动表单,给用户提供几种可选择的地图样式。图为标准样式->马卡龙样式。
3、图为马卡龙样式->草木灰样式。
流程图示意:
二、高德提供的自定义地图样式下载和使用
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"