UWP MapControl：MapElement 固定标题

Question

我正在向我的 MapControl 添加一个 MapElement，但是当我旋转 MapControl 时，我的 MapElement 也随之旋转。是否可以在元素上设置固定标题？

我试过在 MapElement 上使用 RotateTransform，但 Element 似乎完全消失了。

我正在使用以下代码：
此外，<Planes:Airplane /> object 只是自定义绘制的路径。

    <Maps:MapControl x:Name="Map" Style="None" Grid.Row="2" TiltInteractionMode="GestureAndControl" ZoomInteractionMode="GestureAndControl" RotateInteractionMode="GestureAndControl" MapServiceToken="TOKEN HERE">
        <!-- Airplane Layer -->
        <Planes:Airplane x:Name="Airplane" Type="Prop" MaxHeight="80" Maps:MapControl.NormalizedAnchorPoint="0.5,0.5" />
    </Maps:MapControl>

Answer 1

I'm adding a MapElement to my MapControl but when I rotate the MapControl, my MapElement rotates along with it. Is it possible to have a fixed heading on the element?

MapElement doesn't inherit from UIElement，这是RenderTransform的由来。所以不可能在 MapElement 上使用 RenderTransform。

但作为解决方法，您可以考虑使用 MapItemsControl 将任何控件或图像放在地图上，您可以在旋转 MapControl 时旋转或平移图像。

MainPage.Xaml:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel VerticalAlignment="Center">
        <Maps:MapControl
        Width="500"
        Height="500"
        x:Name="myMap"            
        ZoomInteractionMode="GestureAndControl"
        TiltInteractionMode="GestureAndControl"   
        MapServiceToken="MapServiceToken">
            <Maps:MapItemsControl x:Name="mapItems">
                <Maps:MapItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Image Source="{Binding ImageSourceUri}" 
                                   Maps:MapControl.Location="{Binding Location}">
                                <Image.RenderTransform>
                                    <TransformGroup>
                                        <RotateTransform Angle="{Binding Rotate.Angle}"
                                                         CenterX="{Binding Rotate.CenterX}"
                                                         CenterY="{Binding Rotate.CenterY}"/>
                                        <TranslateTransform X="{Binding Translate.X}"
                                                            Y="{Binding Translate.Y}"/>
                                    </TransformGroup>
                                </Image.RenderTransform>
                            </Image>
                        </StackPanel>
                    </DataTemplate>
                </Maps:MapItemsControl.ItemTemplate>
            </Maps:MapItemsControl>
        </Maps:MapControl>
        <Button Name="myAdd" Click="myAdd_Click">Click Me to Add Element</Button>
        <Button Name="btnRotate" Click="btnRotate_Click">Click Me to Rotate Element</Button>
    </StackPanel>
</Grid>

MainPage.xaml.cs:

public class InterestPoint
{
    public Uri ImageSourceUri { get; set; }
    public Geopoint Location { get; set; }
    public RotateTransform Rotate{ get; set; }
    public TranslateTransform Translate { get; set; }
    public Point CenterPoint { get; set; }
}
public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private List<InterestPoint> InitInterestPoints(BasicGeoposition location)
    {
        List<InterestPoint> points = new List<InterestPoint>();
        points.Add(new InterestPoint {
            ImageSourceUri = new Uri("ms-appx:///Assets/mappin.png"),
            Location = new Geopoint(location),
            Rotate=new RotateTransform
            {
                Angle=15,
                CenterX=28.5,
                CenterY=88
            },
            Translate=new TranslateTransform
            {
                X=-28.5,
                Y=-90
            }
        });

        return points;
    }

    private void myAdd_Click(object sender, RoutedEventArgs e)
    {
        mapItems.ItemsSource = InitInterestPoints(myMap.Center.Position);
    }

    private void btnRotate_Click(object sender, RoutedEventArgs e)
    {
        var points = mapItems.ItemsSource as List<InterestPoint>;
        points[0].Rotate.Angle += 10;
    }
}

效果如下：

下面是整个演示的 link：MapElementRotationSample。

注意：图片是以左上角为锚点添加的。所以需要根据图片大小进行平移。（我的图片是57*90，所以需要平移（-28.5，-88），让针尖为中心点）。

UWP MapControl：MapElement 固定标题

UWP MapControl: MapElement fixed heading

c#

bing-maps

uwp

uwp-maps