UWP中MapControl基于GeoPoint的图片不显示及缩放适配问题求助

Hey there! Let's get that image showing up on your MapView and make it scale properly as you zoom the map. Here's what you need to know and fix:

Do you need to add the image in XAML? #

Nope, adding it dynamically in code works totally fine—your approach isn't wrong, there are just a few small tweaks needed to get it working.

Step 1: Fix the initialization timing #

Your current code calls addImage() directly in the MainPage constructor, but the MapControl might not be fully initialized yet when this runs. Let's move the call to the Loaded event instead, so the map is ready to accept the image:

namespace HelpMe 
{ 
    public sealed partial class MainPage : Page 
    {
        // Make the image a class-level variable so we can access it for scaling later
        private Image _mapImage;

        public MainPage() 
        { 
            this.InitializeComponent(); 
            this.Loaded += MainPage_Loaded;
        } 

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            addImage();
            // Optional: Center the map on your image's location so you can see it immediately
            MapView.Center = new Geopoint(new BasicGeoposition() { Latitude = 0, Longitude = 0 });
            MapView.ZoomLevel = 5;
        }

        //adding image 
        public void addImage() 
        { 
            _mapImage = new Image(); 
            _mapImage.Height = 100; 
            _mapImage.Width = 100; 
            _mapImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/Unknown.jpg")); 
            _mapImage.RenderTransform = new CompositeTransform() { Rotation = 0 }; 

            // This ensures the image's center is anchored to the GeoPoint (good call on this!)
            MapControl.SetNormalizedAnchorPoint(_mapImage, new Point(0.5, 0.5)); 
            MapControl.SetLocation(_mapImage, new Geopoint(new BasicGeoposition() { 
                Latitude = 0, 
                Longitude = 0, 
                Altitude = 0 
            })); 

            MapView.Children.Add(_mapImage); 

            // Hook up the view changed event to handle scaling
            MapView.ViewChanged += MapView_ViewChanged;
        } 

        private void MapView_ViewChanged(MapControl sender, MapViewChangedEventArgs args)
        {
            // Adjust image size based on zoom level—tweak the formula to fit your needs
            // Example: As zoom increases (closer), make the image smaller to maintain relative size
            double baseSize = 100;
            double scaledSize = baseSize / sender.ZoomLevel;
            // Add a minimum size to prevent the image from getting too tiny
            scaledSize = Math.Max(scaledSize, 20);
            _mapImage.Height = scaledSize;
            _mapImage.Width = scaledSize;
        }
    } 
}

Step 2: Verify your image asset #

Double-check that Unknown.jpg exists in your Assets folder, and that its properties are set correctly:

• In Solution Explorer, right-click the image > Properties
• Set Build Action to Content
• Set Copy to Output Directory to Copy if newer

Step 3: Test the adaptive scaling #

The MapView_ViewChanged event we added will adjust the image's size every time the map zoom changes. The formula baseSize / sender.ZoomLevel is a starting point—feel free to adjust the baseSize value or tweak the calculation to get the scaling behavior you want.

Why this works: #

• Waiting for the Loaded event ensures the MapControl is fully ready to render the image
• Making the image a class-level variable lets us update its size during zoom changes
• Anchoring the image to its center with NormalizedAnchorPoint keeps it locked to the correct GeoPoint as the map moves/zooms

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