Android高德地图自定义Marker也能遇到坑？本文记录了高德地图自定义Marker遇到的问题，遇到的一些坑，并提供

背景

最近在做高德地图打点，用到了点聚合功能，另外自定义Marker设计图如下：

需要注意的是，右上角圆圈需自适应“数字”

参考官方文档

自定义Marker设置图标只需要传BitmapDescriptor即可，AMap SDK提供了com.amap.api.maps.model.BitmapDescriptorFactory#fromView 用来将View转成BitmapDescriptor，内部大致流程：measure -> layout -> getDrawingCache.

目前看起来没有任何阻塞，预计可以很快实现编码。

点聚合效果中的相关代码如下：

private BitmapDescriptor getBitmapDes(int num) {
    BitmapDescriptor bitmapDescriptor = mLruCache.get(num);
    if (bitmapDescriptor == null) {
        TextView textView = new TextView(mContext);
        ...
        bitmapDescriptor = BitmapDescriptorFactory.fromView(textView);
        ...
    }
    return bitmapDescriptor;
}

ComposeView的限制

当前项目中已全面拥抱Compose了，既然所以决定用ComposeView实现UI效果

fun getBitmapDes(num: Int): BitmapDescriptor? {
    val markerView = ComposeView(context).apply {
        setContent {
           ... // UI实现
        }
    }
    return BitmapDescriptorFactory.fromView(markerView)
}

...
markerOptions.icon(getBitmapDes(xxx))

写完后一运行居然没显示，经排查发现BitmapDescriptorFactory.fromView返回了null，控制台也有条重要的log： BitmapDescriptorFactory#fromView内部调用ComposeView#measure方法时，检测到它并没有依附window，抛了个异常。

因此我们没法使用这种方式了，同时也知道ComposeView与传统的View在绘制流程上存在差异：ComposeView必须先添加到window才能进行绘制。

再次拥抱ConstraintLayout

可以使用layout_constraintDimensionRatio="1:1"限制文字宽高一样，背景是一个圆环即可。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:padding="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/city_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="-7dp"
        android:layout_marginEnd="4dp"
        android:background="@drawable/bg_rectangle"
        android:minWidth="20dp"
        android:padding="6dp"
        android:textColor="@android:color/white"
        android:textSize="10sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="@id/count"
        app:layout_constraintTop_toBottomOf="@+id/count"
        tools:ignore="SmallSp"
        tools:text="西安市" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/count"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@drawable/bg_circle"
        android:gravity="center"
        android:minWidth="16dp"
        android:padding="1dp"
        android:textColor="#2196F3"
        android:textSize="10sp"
        android:textStyle="bold"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText,SmallSp"
        tools:text="1" />

    <ImageView
        android:layout_width="8dp"
        android:layout_height="4dp"
        android:contentDescription=""
        android:layout_marginTop="-1px"
        android:src="@drawable/bg_triangle"
        app:layout_constraintEnd_toEndOf="@id/city_name"
        app:layout_constraintStart_toStartOf="@id/city_name"
        app:layout_constraintTop_toBottomOf="@id/city_name"
        tools:ignore="ContentDescription" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

似乎没有问题了，但是当设备开启大字体后，minWidth="16dp"就不够用了，很容易出现展示不全的问题：

再来看看关键代码

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/count"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@drawable/bg_circle"
        android:gravity="center"
        android:minWidth="16dp"
        android:padding="1dp"
        android:textColor="#2196F3"
        android:textSize="10sp"
        android:textStyle="bold"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText,SmallSp"
        tools:text="1" />

这里以width作为基准，根据ratio来计算height：对于宽<高的文本就会被截断。

我们以height作为基准也不行，因为文本是单行，高是固定的，文本的宽>高时就展示不全，效果如下：

然而文本是动态的，xml是静态的，因此没法单一的设置width或height作为基准来满足所有场景。难不成得运行时动态设置了？

理论上纯代码能完全替换xml所有的实现效果，但也会增加维护成本，所以有没有其他配置项可以扭转乾坤？

几经尝试终于找到一种配置实现期望的效果。

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/count"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintHeight_default="wrap"
        android:background="@drawable/bg_circle"
        android:gravity="center"
        android:minWidth="16dp"
        android:padding="1dp"
        android:textColor="#2196F3"
        android:textSize="10sp"
        android:textStyle="bold"    
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText,SmallSp"
        tools:text="1" />

看看效果：

短	中等	超长	大字体

至此UI部分算是完成了。

总结

本文记录了高德地图自定义Marker遇到的问题，遇到的一些坑，并提供了相应的应对策略，最终提供了一套相对简洁的实现方案。