在 Xamarin Forms 中的自定义地图图钉上显示 url

Question

在 Xamarin 表单中，我使用谷歌地图插件来显示某些位置。 对于每个位置的图钉，我想显示一个 url 以及标签和地址，以便用户可以单击该 url 并打开一个信息页面。

我创建了一个自定义 pin 以包含 url，但我不知道如何在 pin 上显示它。

有人知道怎么做吗？

public partial class MapPage : ContentPage
    {
        public List<CustomPin> CustomPins { get; set; }

        public MapPage()
        {
            InitializeComponent();
            PlotPositions();
            MyMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(lat, long), Distance.FromMiles(1.0)));
        }

        public  void PlotPositions()
        {
            var myPos = new Position(lat, long);
            var pin = new CustomPin
            {
                Type = PinType.Place,
                Position = myPos,
                Label = "Glasgow City Centre",
                Address = "Argle Street, Glasgow",
                Url = "testUrl"
            };
            MyMap.Pins.Add(pin);
        }

        public class CustomPin : Pin
        {
            public string Id { get; set; }
            public string Url { get; set; }
        }

}

internal class CustomPin
    {
        public PinType Type { get; set; }
        public Position Position { get; set; }
        public string Label { get; set; }
        public string Url { get; set; }
    }

地图页面：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             x:Class="gl_mobile_app.Views.Map.MapPage">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="back" />
    </ContentPage.ToolbarItems>
    <ContentPage.Content>

        <Grid BackgroundColor="Gray">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Row="0" Padding="20,20,20,20">
                <maps:Map 
                x:Name="MyMap"
                IsShowingUser="True"
                MapType="Street"
            />
            </StackLayout>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Answer 1

您能否扩展您的渲染器和 MapPage 布局的代码

或者尝试使用这个例子 https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/map/customized-pin.

如果你想改进 Pin，你需要在 droid 项目中创建地图渲染器。

在这个渲染器中你需要重写 CreateMarker 方法。

    protected override MarkerOptions CreateMarker(Pin pin)
    {
        var marker = new MarkerOptions();
        marker.SetPosition(new LatLng(pin.Position.Latitude, pin.Position.Longitude));
        marker.SetTitle(pin.Label);
        marker.SetSnippet(pin.Address);
        marker.SetIcon(BitmapDescriptorFactory.FromResource(Resource.Drawable.Pin));
        return marker;
    }

您还需要此标记的 Pin 图片。

在我上面发布的链接中，您可以看到 CreateMarker 方法的示例