如何在 MapControl 中动态使用具有多个引脚的多个自定义弹出窗口

Posted 2023-04-13

【中文标题】如何在 MapControl 中动态使用具有多个引脚的多个自定义弹出窗口

【英文标题】：How to use multiple custom popup with multiple pins dynamically in MapControl

【发布时间】：2020-10-25 00:55:31

【问题描述】：

我正在尝试将自定义文本添加到我的自定义弹出窗口的标题中，但似乎无法找到正确的方法来从我的项目主页动态查找控件本身。如何实现？

预期结果

当前结果

MainPage.cs

public sealed partial class MainPage: Page
 
     public MainPage()
     
         this.InitializeComponent();


         TabView tabView = mainPage.MyTabs;

         var tab1 = new TabViewItem  Header = "Tab 1"

         tabView.SelectedItem = tab1;


         var mapPage= new MapPage();

         tab1.Content = mapPage;


         var MyLandmarks = new List<MapElement>();

         BasicGeoposition snPosition = new BasicGeoposition  Latitude = 51.120005, Longitude = -0.1000001 ;
         Geopoint snPoint = new Geopoint(snPosition);

         var spaceNeedleIcon = new MapIcon
         
             Location = snPoint,
             NormalizedAnchorPoint = new Point(0.5, 1.0),
             ZIndex = 0,
             Title = "Space Needle",
             Image = mapPushpinStreamReference
         ;

         BasicGeoposition snPosition2 = new BasicGeoposition  Latitude = 51.000000, Longitude = -0.100000 ;
         Geopoint snPoint2 = new Geopoint(snPosition2);


         var spaceNeedleIcon2 = new MapIcon
         
             Location = snPoint2,
             NormalizedAnchorPoint = new Point(0.5, 1.0),
             ZIndex = 0,
             Title = "Space N",
             Image = mapPushpinStreamReference
         ;

         MyLandmarks.Add(spaceNeedleIcon);
         MyLandmarks.Add(spaceNeedleIcon2);

         var LandmarksLayer = new MapElementsLayer
         
             ZIndex = 1,
             MapElements = MyLandmarks
         ;

         pageMap.theMapControl.Layers.Add(LandmarksLayer);


         // Specify location of MapView centre.
         BasicGeoposition cityPosition = new BasicGeoposition()  Latitude 25.0, Longitude = -0.1 ;
         var cityCenter = new Geopoint(cityPosition);

         // Set MapView centre
         pageMap.theMapControl.Center = cityCenter;
     
 

MapPage.xaml

     <Page
     x:Class="MyApp.MapPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:MyApp"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
     mc:Ignorable="d">
    
     <Grid x:Name="MyGrid">
         <Grid.RowDefinitions>
             <RowDefinition Height="*"/>
             <RowDefinition Height="Auto"/>
         </Grid.RowDefinitions>
    
         <Maps:MapControl
             Grid.Row="0"
             x:Name="MyMapControl"  
             MapServiceToken="[token]"
             ZoomLevel="8"
             MapElementClick="MyMapControl_MapElementClick">
    
             <Popup x:Name="PushpinPopup" IsLightDismissEnabled="True">
                 <Grid Background="Black">
                     <ScrollViewer>
                         <StackPanel Orientation="Vertical">
                             <TextBlock Text="x:Bind PopupTitle, Mode=OneWay" />
                             <Button x:Name="DescriptionButton" Content="Description"/>
                         </StackPanel>
                     </ScrollViewer>
                 </Grid>
             </Popup>
         </Maps:MapControl>
     </Grid>
 </Page>

MapPage.cs

 public sealed partial class MapPage: Page
 
     public MapControl theMapControl  get; set; 

     public PageMap()
     
         this.InitializeComponent();

         theMapControl = MyMapControl;
     

     public static readonly DependencyProperty PopupTitleProperty =
         DependencyProperty.Register("PopupTitle", typeof(string),
             typeof(Popup),
             new PropertyMetadata(""));

     public static readonly DependencyProperty PushpinPopupSubtitleProperty =
         DependencyProperty.Register("PushpinPopupSubtitle", typeof(string),
             typeof(Popup),
             new PropertyMetadata(""));

     public string PopupTitle
     
         get => GetValue(PopupTitleProperty).ToString();
         set  SetValue(PopupTitleProperty, value); 
     

     private void MyMapControl_MapElementClick(MapControl sender, MapElementClickEventArgs args)
     
         Point point = args.Position;
         PushpinPopup.IsOpen = true;
     
 

MainPage.xaml

<Page
    x:Class="MyApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <CommandBar Grid.Row="0">
            ...
        </CommandBar>

        <Frame Name="MainFrame" Grid.Row="1"/>
    </Grid>
</Page>

【问题讨论】：

可以分享您的 MainPage.Xaml 内容吗？

您的意思是要从 MainPage 访问 MapPage 的弹出窗口吗？

地图页面正在加载到主页的Frame，所以我想从我选择的任何页面创建和访问弹出控件，即动态创建 2 个引脚 -> 设置弹出标题和为每个引脚动态添加字幕。

所以您的问题是您无法从其他页面访问弹出窗口，对吧？

@NicoZhu-MSFT 没错。这个问题仍然存在。

【参考方案1】：

如何在 MapControl 中动态使用多个带有多个引脚的自定义弹出窗口

根据需求，可以将弹窗移动到用户控件中，并设置tile和subtitle属性。

在MapElementClick 事件中使用 MapIcon 的标签获取 MapIcon。然后将标题和副标题值传递给UserControl 的标题和副标题属性，然后显示弹出窗口。

MapIcon myClickedIcon = args.MapElements.FirstOrDefault(x => x.Tag.ToString() == "tag") as MapIcon;