Xamarin.Forms.GoogleMaps中Pin的tooltip气泡如何实现多个可点击堆叠标签

默认的Pin控件仅支持设置单文本的Label属性，无法直接实现多堆叠标签+点击交互的需求，可通过如下方式实现： #

步骤1：自定义扩展Pin类 #

扩展原生Pin类存储额外的标签数据：

public class CustomPin : Pin
{
    // 存储气泡内的标签列表
    public List<InfoTag> InfoTags { get; set; }
}

// 标签数据模型
public class InfoTag
{
    // 标签展示文本
    public string TagText { get; set; }
    // 标签对应的点击触发操作
    public Action TagAction { get; set; }
}

步骤2：定义气泡自定义模板 #

在地图所在页面的XAML中，为Map控件配置InfoWindowTemplate自定义气泡样式：

<googleMaps:Map x:Name="MainMap">
    <googleMaps:Map.InfoWindowTemplate>
        <DataTemplate>
            <StackLayout 
                BackgroundColor="White" 
                Padding="12,8"
                Spacing="6">
                <!-- 堆叠展示所有标签 -->
                <ListView 
                    ItemsSource="{Binding InfoTags}"
                    SeparatorVisibility="None"
                    HasUnevenRows="True">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Label 
                                    Text="{Binding TagText}"
                                    TextColor="#2196F3"
                                    FontSize="14">
                                    <Label.GestureRecognizers>
                                        <TapGestureRecognizer 
                                            Tapped="OnInfoTagTapped" 
                                            CommandParameter="{Binding}"/>
                                    </Label.GestureRecognizers>
                                </Label>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </DataTemplate>
    </googleMaps:Map.InfoWindowTemplate>
</googleMaps:Map>

步骤3：初始化自定义Pin #

替换原有Pin初始化逻辑，传入自定义标签数据：

MainMap.Pins.Add(new CustomPin
{
    Type = PinType.Place,
    Address = "",
    Label = "占位文本",
    Position = new Position(Convert.ToDouble(obj.GeoLat),
        Convert.ToDouble(obj.GeoLng)),
    // 配置你需要的多个标签
    InfoTags = new List<InfoTag>
    {
        new InfoTag { TagText = "查看商户详情", TagAction = () => OpenMerchantDetail(obj) },
        new InfoTag { TagText = "发起路线导航", TagAction = () => StartNavigation(obj) },
        new InfoTag { TagText = "收藏当前位置", TagAction = () => SavePosition(obj) }
    }
});

步骤4：处理标签点击事件 #

在页面后台代码中实现标签点击逻辑：

private void OnInfoTagTapped(object sender, EventArgs e)
{
    var tapRecognizer = sender as TapGestureRecognizer;
    var tag = tapRecognizer?.CommandParameter as InfoTag;
    // 执行标签对应的自定义操作
    tag?.TagAction?.Invoke();
    // 可选：点击后关闭气泡
    MainMap.SelectedPin = null;
}

平台兼容补充 #

Android平台原生InfoWindow默认是静态Bitmap渲染，会拦截子控件点击事件，如遇点击无响应，可在Android项目添加自定义Map渲染器重写GetInfoContents，或是直接用自定义ContentView悬浮在地图上层模拟气泡，即可解决点击事件无效问题。

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