地图控件不会显示 UWP XAML

Question

我正在尝试运行在我的 PC 上使用一个简单的 UWP 应用程序来测试地图控件，使用中的指南：

https://msdn.microsoft.com/en-us/windows/uwp/maps-and-location/display-maps#get-and-set-a-maps-authentication-key

我已经从 Bing Maps Dev Center 获得了一个地图键并将其分配给地图控件。

但是，在设计器中显示的控件带有 "This element is enabled only when the application is running" 消息。

当我运行应用程序时，应用程序屏幕上没有任何显示。

为了检查地图是否已加载，我为地图的 Loaded 事件添加了一个处理程序以在输出窗格中显示消息，消息显示正常。

public MainPage()
{
    this.InitializeComponent();

    MapMain.Loaded += MapMain_Loaded;
}

private void MapMain_Loaded(object sender, RoutedEventArgs e)
{
    Debug.WriteLine("Map is loaded!");
}

这是我的XAML代码：

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestMap"
    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"
    x:Class="TestMap.MainPage"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Maps:MapControl HorizontalAlignment="Left" Margin="404,86,0,0" VerticalAlignment="Top" 
                         x:Name="MapMain"
                         MapServiceToken="<My Map Key Is Here!>"
                         ZoomInteractionMode="GestureAndControl"
                         TiltInteractionMode="GestureAndControl" CacheMode="BitmapCache" CanDrag="True"/>

    </Grid>
</Page>

关于可能是什么问题以及如何解决它有什么想法吗？谢谢

<<< 更新（2017 年 1 月 25 日）>>>

我根据@Sunteen 和@Aditya 的回答更改了地图的宽度和高度属性。但是，我只看到一个空白的地图框，如下图所示。我只看到地图背景。

<<< 更新（2017 年 1 月 27 日）>>>

根据 Aditya 的建议，我在下面添加了我的 XAML 代码以包括我所做的更改：

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestMap"
    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"
    x:Class="TestMap.MainPage"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Maps:MapControl HorizontalAlignment="Left" Margin="92,53,0,0" VerticalAlignment="Top" 
                         x:Name="MapMain"
                         MapServiceToken="<<<My Map Key>>>"
                         Height="400"
                         Width="400"
                         ZoomInteractionMode="GestureAndControl"
                         TiltInteractionMode="GestureAndControl" Background="#FF3BCFCF" ZoomLevel="2"/>
    </Grid>
</Page>

Answer 1

解决问题的方法很简单。为地图控件设置 Height 和 Width 属性然后它将显示。

 <Maps:MapControl
     x:Name="MapMain"
     Width="400"
     Height="400"
     Margin="404,86,0,0"
     HorizontalAlignment="Left"
     VerticalAlignment="Top"
     CacheMode="BitmapCache"
     CanDrag="True"
     TiltInteractionMode="GestureAndControl"
     ZoomInteractionMode="GestureAndControl" />

或者将地图控件的Alignment属性设置为Stretch，地图就会显示出来。

<Maps:MapControl
    x:Name="MapMain"        
    Margin="404,86,0,0"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    CacheMode="BitmapCache"
    CanDrag="True"
    TiltInteractionMode="GestureAndControl"
    ZoomInteractionMode="GestureAndControl" />

原因可能是地图控件没有设置默认的Width和Height，我们可能需要给控件设置Width、Height、MinWidth、MinHeight 等等。如果我们不设置这些属性，我们可能需要拉伸地图让它显示，或者不设置任何东西让它适合父容器。

更多关于地图控制的详细信息请参考official sample. More details about layout with XAML please reference this document。

Answer 2

编辑：（2017 年 1 月 30 日）

好吧，我早该看到这个问题的到来，这个问题与 layout 无关，只是 UI 代码的编写使得所有注意力都集中在 UI布局，我认为这是导致地图无法显示的原因。

原因：地图没有显示是因为你设置的CacheMode="BitmapCache"属性。删除它，您应该能够以迷人的方式查看您的地图。现在您可以看到您的地图，让我们了解为什么 CacheMode="BitmapCache" 会导致问题，

为什么 CacheMode="BitmapCache" 导致了这个问题：

缓存当前被禁用。地图图块是动态生成的。如果启用了缓存并且数据发生了变化，您最终可能会得到两个数据不对齐的图块。

解决方法：

您应该只在您的应用程序中加载地图一次，并在需要时跨页面重复使用它，以避免 bing 地图引起的内存泄漏。

为此，您必须在主页上加载地图，创建一个静态变量来访问地图，然后在 sub-page 加载时 re-position 并根据需要调整地图大小.

MapControl 的最终 UI 代码：

<Maps:MapControl
      x:Name="MapMain"
      ZoomInteractionMode="GestureAndControl"
      TiltInteractionMode="GestureAndControl" 
      CacheMode="BitmapCache" 
      CanDrag="True"/>

良好做法：

在@Sunteen 的回答中，不建议使用硬编码 height 和 Width，使用 400px 或 Margin 只会让您的布局超出屏幕范围在较小的屏幕尺寸上。建议让您的地图元素适应多种屏幕尺寸，因为它是一个 UWP 应用程序，因此请避免使用 Margin 或硬编码 Height 和 Width。

应该做什么：

使用自适应布局显示地图的另一种方法是使用 RowDefinitions 和 ColumnDefinitions 设置自适应高度和宽度，并以这种方式设置地图 HorizontalAlignment="Stretch" VerticalAlignment="Stretch"控件将绑定到一个区域，并会根据 RowDefinitions 和 ColumnDefinitions 的屏幕尺寸变化进行调整。所以你的代码看起来像下面这样：

<Gird>
   <Grid.RowDefinitions>
         <RowDefinition Height="*"/>
         <RowDefinition Height="*"/>
         <RowDefinition Height="*"/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>
   <Maps:MapControl
        x:Name="MapMain"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        Grid.Row="1"
        Grid.Column="1"
        CanDrag="True"
        TiltInteractionMode="GestureAndControl"
        ZoomInteractionMode="GestureAndControl" />
</Grid>

要根据您想要的地图大小和布局重新定位地图，您可以

添加更多 Row/Column 定义，甚至删除一些不需要的定义。
通过分别更改Height/Width来调整Row/Column定义覆盖的区域，这样做时请确保在“*”的因素中这样做，例如：<RowDefinition Height="5*"/>.通过这种方式，您将更多地关注屏幕尺寸比率而不是屏幕尺寸像素（这种方法更具适应性）。

有关自适应布局的更多信息，请参阅。问题是 windows phone 8 但同样的规则适用。

地图控件不会显示 UWP XAML

Map Control won't show up UWP XAML

dictionary

bing-maps

uwp

windows-10-universal

uwp-maps

编辑：（2017 年 1 月 30 日）

良好做法：