如何在地图图标上方添加 UI 元素以显示 Windows 10 中的地址？

Question

我在 Windows 10 中使用 MapControl，我想在地图图标上方显示位置地址。我知道如何添加地图图标，但不知道如何在其上方添加 UI 元素。我使用以下代码添加了地图图标

MapControl map = frameworkElement as MapControl;
map.MapServiceToken= "my service token";
BasicGeoposition councilPosition = new BasicGeoposition()
{
     Latitude = Convert.ToDouble(Info.GetType().GetRuntimeProperty("LATITUDE").GetValue(Info, null)),
     Longitude = Convert.ToDouble(Info.GetType().GetRuntimeProperty("LONGITUDE").GetValue(Info, null))
};

Geopoint pinPoint = new Geopoint(councilPosition);

MapIcon locationPin = new MapIcon();
locationPin.Image= RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Images/pushpin.png"));
locationPin.Title = councilInfo.COUNCIL_NAME;
locationPin.CollisionBehaviorDesired = MapElementCollisionBehavior.RemainVisible;
locationPin.Location = councilPoint;
locationPin.NormalizedAnchorPoint = new Point(0.5, 1.0);
locationPin.ZIndex = 0;

map.MapElements.Add(locationPin);
await map.TrySetViewAsync(locationPin.Location, 15D, 0, 0, MapAnimationKind.Bow);

我想实现与下面截图相同的效果

Answer 1

由于自定义模板的程序化添加 MapIcons 很忙。这是我在我的应用程序中使用地图控件的方式

    <maps:MapControl x:Name="MapControl"  MapServiceToken="YourToken" >
                    <maps:MapItemsControl ItemsSource="{Binding YourData, Mode=TwoWay}">
                        <maps:MapItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Tapped="MapIcon_Tapped" Orientation="Horizontal">
                                    <Image Height="30" VerticalAlignment="Top" maps:MapControl.Location="{Binding Location}" maps:MapControl.NormalizedAnchorPoint="0.5,0.5" Source="ms-appx:///Images/pushpin.png"/>
                                    <Border BorderThickness="1" BorderBrush="LightGray" Visibility="{Binding DetailsVisibility}">
                                        <StackPanel x:Name="MapIcon"    Background="White" >
                                            <TextBlock  Text="{Binding yourMin}" Foreground="Black"  FontWeight="SemiBold" FontSize="16" Margin="5" TextWrapping="WrapWholeWords"  />
                                            <TextBlock Text="{Binding YourCar}" Foreground="Gray"  FontWeight="SemiBold" FontSize="12" Margin="5" TextWrapping="WrapWholeWords"/>
                                            <Image Source="Your Arrow"/>
                                        </StackPanel>
                                    </Border>
                                </StackPanel>
                            </DataTemplate>
                        </maps:MapItemsControl.ItemTemplate>
                    </maps:MapItemsControl>
                </maps:MapControl>

现在，您只需继续向 YourData 添加数据即可添加更多图钉。添加了两个属性
1. Location- 属于 Geopoint 类型，它将根据经纬度确定图钉的放置位置，例如 temp.Location = new Geopoint(new BasicGeoposition { Latitude = double.Parse(temp.Lat), Longitude = double.Parse(temp.Long) });
2. Visibility- 这将用于处理图钉细节可见性，使其仅在点击它时可用。例如。 temp.DetailsVisibility = Windows.UI.Xaml.Visibility.Collapsed;
您需要将这些值添加到 YourData 以进行绑定。

Answer 2

I know how to add a map icon but not aware of adding a UI element above it.

如果需要在MapIcon上方添加UIElement，一种可能的方法是将UIElement添加到MapControl的Children中并设置为相同的坐标(MapControl.SetLocation)。

这是一个简单的示例：

BasicGeoposition snPosition = new BasicGeoposition() { Latitude = 47.643, Longitude = -122.131 };
Geopoint snPoint = new Geopoint(snPosition);
Grid MyGrid = new Grid();
MyGrid.Background = new SolidColorBrush(Windows.UI.Colors.Blue);
TextBlock text = new TextBlock();
text.Text = "Hello";
text.Width = 200;
MyGrid.Children.Add(text);
MyMapControl.Center = snPoint;
MyMapControl.ZoomLevel = 14;
// Get the address from a `Geopoint` location.
MapLocationFinderResult result = await MapLocationFinder.FindLocationsAtAsync(snPoint);

if (result.Status == MapLocationFinderStatus.Success)
{
    text.Text = "Street = " + result.Locations[0].Address.Street;
}
MyMapControl.Children.Add(MyGrid);
MapControl.SetLocation(MyGrid, snPoint);
MapControl.SetNormalizedAnchorPoint(MyGrid, new Point(0.5, 0.5));

截图(gif):

如何在地图图标上方添加 UI 元素以显示 Windows 10 中的地址？

How to add a UI element above Map Icon to show address in Windows 10?

c#

windows-10-universal