Question

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

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. 位置 - 是Geopoint类型，它将根据纬度和经度处理图钉的位置，例如temp.Location = new Geopoint(new BasicGeoposition { Latitude = double.Parse(temp.Lat), Longitude = double.Parse(temp.Long) });
2. 可见性 - 这将用于处理图钉细节可见性，仅在录制它时可用。例如。 temp.DetailsVisibility = Windows.UI.Xaml.Visibility.Collapsed;
您需要将这些值添加到YourData以进行绑定。

Answer 2

我知道如何添加地图图标但不知道在其上方添加UI元素。

如果需要在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中显示地址？

2 个答案: