如何在Java Activity中将Marker的Snippet数据改为表格形式显示

嘿，想要在Marker的详情窗口里展示规整的表格数据对吧？默认的MarkerOptions.snippet()只能输出纯文本，没法渲染表格样式，所以咱们得通过自定义InfoWindow来实现这个需求，下面一步步教你操作：

1. 为什么默认Snippet不行？ #

Google Maps的Marker默认详情窗口（InfoWindow）只支持纯文本内容，不解析HTML标签，所以直接把表格字符串丢给snippet只会显示一堆代码，根本出不来表格效果。必须自定义InfoWindow的布局，用支持HTML解析的控件来展示表格。

2. 实现步骤 #

第一步：创建自定义InfoWindow布局 #

先在res/layout下新建一个布局文件custom_info_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:orientation="vertical"
    android:padding="8dp"
    android:background="#ffffff"
    android:elevation="4dp">

    <!-- Marker标题 -->
    <TextView
        android:id="@+id/tv_info_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textStyle="bold"
        android:textColor="#333333"
        android:marginBottom="6dp"/>

    <!-- 表格内容展示区 -->
    <TextView
        android:id="@+id/tv_table_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="13sp"
        android:textColor="#555555"/>

</LinearLayout>

第二步：编写生成HTML表格的方法 #

把你从数据库拿到的数据，拼接成HTML格式的表格字符串，这样TextView就能解析渲染出表格：

/**
 * 根据位置生成对应的HTML表格字符串
 */
private String generateTableHtml(int position) {
    StringBuilder htmlBuilder = new StringBuilder();
    
    // 初始化表格，设置边框、内边距样式
    htmlBuilder.append("<table border='1' cellpadding='3' cellspacing='0' style='border-color:#ccc;'>");
    
    // 表头行
    htmlBuilder.append("<tr style='background-color:#f5f5f5;'>");
    htmlBuilder.append("<th></th>");
    htmlBuilder.append("<th>Jan 2018</th>");
    htmlBuilder.append("<th>Feb 2018</th>");
    htmlBuilder.append("<th>MoM</th>");
    htmlBuilder.append("</tr>");
    
    // 2G设备数据行
    htmlBuilder.append("<tr>");
    htmlBuilder.append("<td>Hadset 2G</td>");
    htmlBuilder.append("<td>").append(Jml_Handset_2G_month1.get(position)).append("</td>");
    htmlBuilder.append("<td>").append(Jml_Handset_2G_month2.get(position)).append("</td>");
    htmlBuilder.append("<td>").append(Jml_Handset_2G_inc.get(position)).append("</td>");
    htmlBuilder.append("</tr>");
    
    // 3G设备数据行
    htmlBuilder.append("<tr>");
    htmlBuilder.append("<td>Hadset 3G</td>");
    htmlBuilder.append("<td>").append(Jml_Handset_3G_month1.get(position)).append("</td>");
    htmlBuilder.append("<td>").append(Jml_Handset_3G_month2.get(position)).append("</td>");
    htmlBuilder.append("<td>").append(Jml_Handset_3G_inc.get(position)).append("</td>");
    htmlBuilder.append("</tr>");
    
    // 4G设备数据行
    htmlBuilder.append("<tr>");
    htmlBuilder.append("<td>Hadset 4G</td>");
    htmlBuilder.append("<td>").append(Jml_Handset_4G_month1.get(position)).append("</td>");
    htmlBuilder.append("<td>").append(Jml_Handset_4G_month2.get(position)).append("</td>");
    htmlBuilder.append("<td>").append(Jml_Handset_4G_inc.get(position)).append("</td>");
    htmlBuilder.append("</tr>");
    
    // 语音收入数据行
    htmlBuilder.append("<tr>");
    htmlBuilder.append("<td>Rev Voice</td>");
    htmlBuilder.append("<td>").append(Rev_Voice_month1.get(position)).append("</td>");
    htmlBuilder.append("<td>").append(Rev_Voice_month2.get(position)).append("</td>");
    htmlBuilder.append("<td>").append(Rev_Voice_inc.get(position)).append("</td>");
    htmlBuilder.append("</tr>");
    
    // 剩下的SMS、Broadband等数据行，照着上面的格式添加即可
    // ...
    
    htmlBuilder.append("</table>");
    return htmlBuilder.toString();
}

第三步：设置GoogleMap的InfoWindowAdapter #

在你的Activity中，给GoogleMap设置自定义的InfoWindow适配器，把咱们的布局和表格数据绑定起来：

// 给地图设置自定义InfoWindow适配器
mMap.setInfoWindowAdapter(new GoogleMap.InfoWindowAdapter() {
    @Override
    public View getInfoWindow(Marker marker) {
        // 返回null表示使用默认的窗口框架，只自定义内部内容
        return null;
    }

    @Override
    public View getInfoContents(Marker marker) {
        // 加载自定义布局
        View infoView = getLayoutInflater().inflate(R.layout.custom_info_window, null);
        
        // 获取布局中的控件
        TextView tvTitle = infoView.findViewById(R.id.tv_info_title);
        TextView tvTable = infoView.findViewById(R.id.tv_table_content);
        
        // 从Marker的Tag中获取数据索引（添加Marker时要存好这个索引）
        int dataPosition = (int) marker.getTag();
        
        // 设置标题
        tvTitle.setText(SITE_ID.get(dataPosition));
        
        // 解析HTML表格并设置到TextView
        String tableHtml = generateTableHtml(dataPosition);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            tvTable.setText(Html.fromHtml(tableHtml, Html.FROM_HTML_MODE_COMPACT));
        } else {
            // 兼容Android N以下版本
            tvTable.setText(Html.fromHtml(tableHtml));
        }
        
        return infoView;
    }
});

第四步：修改Marker添加逻辑，绑定数据索引 #

在添加Marker的时候，把当前数据的索引存到Marker的tag里，这样后续在InfoWindow中就能拿到对应位置的数据：

// 循环添加Marker时的代码（替换你原来的addMarker逻辑）
for (int i = 0; i < SITE_ID.size(); i++) {
    double lat = // 从你的数据中获取纬度
    double longi = // 从你的数据中获取经度
    
    Marker marker = mMap.addMarker(new MarkerOptions()
            .position(new LatLng(lat, longi))
            .title(SITE_ID.get(i))
            .icon(revicon));
    
    // 把当前数据索引存到Marker的Tag中
    marker.setTag(i);
}

3. 注意事项 #

• TextView支持的HTML标签有限，<table>、<tr>、<td>、<th>这些基础表格标签都能正常解析，你可以通过style属性调整边框颜色、背景色等样式；
• 如果需要更复杂的交互或样式，也可以把TextView换成WebView，加载HTML表格会更灵活，但WebView占用资源更高，根据需求选择；
• 要确保数据列表（比如Jml_Handset_2G_month1）的索引和Marker的Tag对应，避免出现索引越界异常；
• 测试时注意不同Android版本的兼容性，尤其是HTML解析的方法差异。

内容的提问来源于stack exchange，提问作者EL Pujana