在Xamarin Forms中的自定义地图引脚上显示网址

时间:2018-03-14 11:03:11

标签: c# google-maps xamarin.forms

在Xamarin Forms中,我使用谷歌地图插件来显示某些位置。 对于每个位置的图钉,我想显示一个网址以及标签和地址,因此用户可以点击网址并打开信息页。

我创建了一个自定义引脚来包含网址,但我不知道如何在引脚上显示这个。

任何人都知道怎么做?

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>

1 个答案:

答案 0 :(得分: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的示例