如何为Google Maps设置含信息与按钮的自定义样式标记标题/详情？

嘿，我来帮你搞定这个自定义标记弹窗的需求！已经有了自定义图标，接下来咱们一步步实现点击标记弹出带样式的弹窗，里面还能加专属信息和按钮～

1. 先做自定义弹窗的布局 #

首先在你的res/layout文件夹里新建一个布局文件，比如custom_marker_window.xml，按照你想要的样式来排版标题、详情和按钮：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_window_bg" <!-- 可以自己做个圆角背景图或者用shape定义样式 -->
    android:orientation="vertical"
    android:padding="16dp"
    android:elevation="8dp">

    <TextView
        android:id="@+id/window_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold"
        android:textColor="#222"/>

    <TextView
        android:id="@+id/window_details"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:textColor="#555"
        android:layout_marginTop="8dp"/>

    <Button
        android:id="@+id/window_action_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="查看更多"
        android:layout_marginTop="12dp"
        android:background="#007bff"
        android:textColor="#fff"/>
</LinearLayout>

2. 在地图代码里设置自定义弹窗逻辑 #

接下来修改你现有的地图代码，给GoogleMap绑定自定义的弹窗适配器，同时处理标记点击事件：

// 你的原有代码
LatLng huduma_gpo = new LatLng(-1.280694, 36.818277);
Marker gpoMarker = googleMap.addMarker(new MarkerOptions()
        .position(huduma_gpo)
        .title("Huduma center GPO")
        .icon(BitmapDescriptorFactory.fromBitmap(marker)));

// 自动缩放至标记位置
googleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(huduma_gpo, 12.0f));

// 关键：设置自定义弹窗适配器
googleMap.setInfoWindowAdapter(new GoogleMap.InfoWindowAdapter() {
    @Override
    public View getInfoWindow(Marker marker) {
        // 返回null让系统保留默认的弹窗框架，我们用下面的方法填充自定义内容
        return null;
    }

    @Override
    public View getInfoContents(Marker marker) {
        // 加载咱们刚才做的自定义布局
        View customWindow = getLayoutInflater().inflate(R.layout.custom_marker_window, null);

        // 拿到布局里的控件，填充内容
        TextView titleTv = customWindow.findViewById(R.id.window_title);
        TextView detailsTv = customWindow.findViewById(R.id.window_details);
        Button actionBtn = customWindow.findViewById(R.id.window_action_btn);

        titleTv.setText(marker.getTitle());
        // 这里可以放你需要的特定信息，比如地址、营业时间之类的
        detailsTv.setText("地址：Nairobi 市中心\n营业时间：周一至周五 8:00-17:00");

        // 注意：弹窗里的按钮直接setOnClickListener没用，因为弹窗是静态位图，得用下面的InfoWindow点击监听
        actionBtn.setTag(marker);

        return customWindow;
    }
});

// 处理弹窗（包括按钮）的点击事件
googleMap.setOnInfoWindowClickListener(marker -> {
    // 这里写按钮的点击逻辑，比如跳转到详情页、打开对话框之类的
    Toast.makeText(getApplicationContext(), "你点击了" + marker.getTitle() + "的弹窗", Toast.LENGTH_SHORT).show();
    // 如果有多个标记，可以通过marker的Tag来区分不同的操作
});

3. 小提醒 #

• 为啥按钮直接加点击事件没用？因为Google Maps的InfoWindow是把布局渲染成一张静态图片展示的，所以里面的控件没法直接响应点击，必须通过OnInfoWindowClickListener来统一处理。如果想要完全交互的弹窗，可以考虑用Android原生的PopupWindow来替代系统的InfoWindow。
• 如果每个标记的弹窗内容不一样，可以给Marker设置setTag()来存自定义数据，比如gpoMarker.setTag(new MarkerData("Huduma GPO", "地址xxx", "电话xxx"));，然后在getInfoContents里取出marker.getTag()来填充内容。
• 样式方面，你可以通过修改布局的背景、字体大小、按钮颜色等，完全匹配你想要的效果。

这样就能实现你示例里的自定义弹窗啦！

内容的提问来源于stack exchange，提问作者Nick.K