Как создать пользовательское информационное окно в картах xamarin?

#google-maps #xamarin.forms #google-maps-markers #xamarin.forms.maps

#google-карты #xamarin.forms #google-карты-маркеры #xamarin.forms.maps

Вопрос:

Я хочу создать пользовательское информационное окно в моей карте Xamarin forms, как я могу это реализовать.Я использую картографический плагин xamarin.forms.map для создания карты. Пожалуйста, помогите мне, я хочу пользовательское информационное окно, подобное этому

я создаю пользовательскую карту и пользовательский pin-код

  public class CustomMap : Map
    {
        public List<CustomPin> CustomPins { get; set; }
        }
  

Пользовательский pin-код

 public class CustomPin : Pin
    {
        public string ImageUrl { get; set; }

        public float rating { get; set; }
}
  

Страница карты xaml.cs

 public partial class MapPage : ContentPage
    {
        CustomPin pin;
        MapVM MapVM;
        public MapPage()
        {
            InitializeComponent();

            pin = new CustomPin
            {
                Type = PinType.Place,
                Position = new Position(37.79752, -122.40183),
                Label = "Xamarin San Francisco Office",
                Address = "394 Pacific Ave, San Francisco CA",
                Url = "http://xamarin.com/about/",
                rating = 3

            };
            var pin1 = new CustomPin
            {
                Type = PinType.Place,
                Position = new Position(38.79752, -124.40183),
                Label = "Xamarin San Francisco Office",
                Address = "395 Pacific Ave, San Francisco CA",
                Url = "http://xamarin.com/about/",
                rating=2

            };

            customMap.CustomPins = new List<CustomPin> { pin, pin1 };
             customMap.Pins.Add(pin);
            customMap.Pins.Add(pin1);
            customMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(37.79752, -122.40183), Distance.FromMiles(1.0)));
        }
}
  

теперь я не знаю о пользовательском классе рендеринга. пожалуйста, помогите мне, как я могу определить
пользовательский класс рендеринга и как я назначаю значение изображения и рейтинговые значения для отображения в информационном окне..

CustomRender.cs

 [assembly: ExportRenderer(typeof(CustomMap), typeof(CustomMapRenderer))]
namespace CustomRenderer.Droid
{
    public class CustomMapRenderer : MapRenderer, GoogleMap.IInfoWindowAdapter
    {
        List<CustomPin> customPins;

        public CustomMapRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Map> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null)
            {
                NativeMap.InfoWindowClick -= OnInfoWindowClick;
            }

            if (e.NewElement != null)
            {
                var formsMap = (CustomMap)e.NewElement;
                customPins = formsMap.CustomPins;
                Control.GetMapAsync(this);
            }
        }

        protected override void OnMapReady(GoogleMap map)
        {
            base.OnMapReady(map);

            NativeMap.InfoWindowClick  = OnInfoWindowClick;
            NativeMap.SetInfoWindowAdapter(this);
        }
        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);
    return marker;
}
public Android.Views.View GetInfoContents (Marker marker)
{
  var inflater = Android.App.Application.Context.GetSystemService (Context.LayoutInflaterService) as Android.Views.LayoutInflater;
  if (inflater != null) {
    Android.Views.View view;

    var customPin = GetCustomPin (marker);
    if (customPin == null) {
      throw new Exception ("Custom pin not found");
    }

    if (customPin.Id.ToString() == "Xamarin") {
      view = inflater.Inflate (Resource.Layout.XamarinMapInfoWindow, null);
    } else {
      view = inflater.Inflate (Resource.Layout.MapInfoWindow, null);
    }

    var infoTitle = view.FindViewById<TextView> (Resource.Id.InfoWindowTitle);
    var infoSubtitle = view.FindViewById<TextView(Resource.Id.InfoWindowSubtitle);
 var imageView = view.FindViewById<ImageView>(Resource.Id.image);
            var ratings = view.FindViewById<RatingBar>(Resource.Id.ratingbar);
//here how i set values for Image and Rating Cotrol

    if (infoTitle != null) {
      infoTitle.Text = marker.Title;
    }
    if (infoSubtitle != null) {
      infoSubtitle.Text = marker.Snippet;
    }

    return view;
  }
  return null;
}
    }
}
  

Комментарии:

1. Пользовательские средства визуализации связаны с настроенной страницей, представлением и т.д. к тому, как будет отображаться на платформе. Необходимо выполнить поиск объектов с возможностью привязки. Я думаю, вам следует создать привязываемый макет на этой странице и добавить карту, а также добавить в этот макет ваши индивидуальные виды, кнопки и т.д.

2. можете ли вы рассказать, как я могу отображать на конкретной платформе с помощью пользовательского рендеринга

3. Вы можете найти здесь простые решения

4. пожалуйста, посмотрите мой вопрос еще раз, я обновляю его..

Ответ №1:

Вы можете определить компонент, основанный на Xamarin.Компонент Forms, и вы можете изменить его, например, добавив какое-либо связываемое свойство, объект и т.д. Также вы можете использовать макет, такой как stack , flow и т.д., Вместо Xamarin.Компонент Forms. Таким образом, вы можете повысить уровень настройки.

На стороне Android

     [assembly: ExportRenderer(typeof(CustomEntry), typeof(AndroidCustomEntryRenderer))]
namespace MyProject.Droid.Renderer
{
    public class AndroidCustomEntryRenderer : EntryRenderer
    {
        public AndroidCustomEntryRenderer(Context context) : base(context)
        {
        }
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.SetBackgroundColor(global::Android.Graphics.Color.White);

            }
        }
    }
} 
  

На стороне PCL

 namespace MyProject.Views.ViewComponents
{
    public class CustomEntry : Entry
    {
    }
}