Xamarin.Forms.CarouselView 中的地图：路线未直接显示

Question

I have a problem with displaying a route in a map on a carouselView.

Setup

I have the carouselview in my VireModel binded to a cotentview

        private ContentView carousel;
        public ContentView Carousel
        {
            get { return carousel; }
            set
            {
                if (carousel != value)
                {
                    carousel = value;
                    OnPropertyChanged("Carousel");
                }
            }
        }

I give it the following contentViews as items

        private void InitializeCarousel()
        {
            Carousel = new ContentView()
            {
                Content = CarouselView()
            };
        }

        private CarouselView CarouselView()
        {
            ContentView[] items = CarouselItems();


            CarouselView carouselView = new CarouselView()
            {

                ItemsSource = items,
                IndicatorView = indicatorView,
                ItemTemplate = viewDataTemplate
            };

            return carouselView;
        }

        private ContentView[] CarouselItems()
        {
            ContentView[] items = new ContentView[5] 
            {
                 MapView(), SpeedView(), PaceView(), HeightView(), StepLengthView() 
            };


            return items;

        }

MapView() is implemented like this:

        private ContentView MapView()
        {
            
            Polygon route = new Polygon
            {
                StrokeWidth = 8,
                StrokeColor = Color.FromHex("#1BA1E2"),
                Geopath =
                {
                    new Position(47.6368678, -122.137305),
                    new Position(47.6368894, -122.134655),
                    new Position(47.6359424, -122.134655),
                    new Position(47.6359496, -122.1325521),
                    new Position(47.6424124, -122.1325199),
                    new Position(47.642463,  -122.1338932),
                    new Position(47.6406414, -122.1344833),
                    new Position(47.6384943, -122.1361248),
                    new Position(47.6372943, -122.1376912)
                }
            };

            MapSpan span = new MapSpan(new Position(47.6368678, -122.137305), 0.02, 0.02);
            
            Map map = new Map(span)
            {
                HasScrollEnabled = false,
                HasZoomEnabled = false,
            };

            map.MapElements.Add(route);

            ContentView view = new ContentView()
            {
                Content = map
            };

            return view;
        }

Problem

The problem is that if the page is open in the app the map is zoomed out completly. If I swipe trough the carousel on time completly I see the Route and the MapSpan is correct.

1. First:

2. After swiping trough the carousel completly

Edit

here is a gif of the problem

Answer 1

Please add map.MoveToRegion(mapSpan); in your MapView 's method.

 private ContentView MapView()
        {
            
            Polygon route = new Polygon
            {
                StrokeWidth = 8,
                StrokeColor = Color.FromHex("#1BA1E2"),
                Geopath =
                {
                    new Position(47.6368678, -122.137305),
                    new Position(47.6368894, -122.134655),
                    new Position(47.6359424, -122.134655),
                    new Position(47.6359496, -122.1325521),
                    new Position(47.6424124, -122.1325199),
                    new Position(47.642463,  -122.1338932),
                    new Position(47.6406414, -122.1344833),
                    new Position(47.6384943, -122.1361248),
                    new Position(47.6372943, -122.1376912)
                }
            };

            MapSpan span = new MapSpan(new Position(47.6368678, -122.137305), 0.02, 0.02);
            
            Map map = new Map(span)
            {
                HasScrollEnabled = false,
                HasZoomEnabled = false,
            };

            map.MapElements.Add(route);
           
            ContentView view = new ContentView()
            {
                Content = map
            };
            map.MoveToRegion(mapSpan);
            return view;
        }