Question

我试图在我的电脑上运行一个简单的UWP应用程序来测试地图控件，使用以下指南：

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

我从Bing Maps开发中心获取了一个地图密钥，并将其分配给地图控件。

但是，在设计器中，控件显示为＆＃34;此元素仅在应用程序运行时启用＆＃34;消息。

运行应用程序时，应用程序屏幕上不显示任何内容。

要检查地图是否已加载，我为地图的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>

对可能出现的问题以及如何解决问题的想法？谢谢

＆LT;＆LT;＆LT;更新（2017年1月25日）＆gt;＆gt;＆gt;

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

＆LT;＆LT;＆LT;更新（2017年1月27日）＆gt;＆gt;＆gt;

根据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，{等属性设置控件{1}}，Height，MinWidth等等。如果我们不设置这些属性，我们可能需要拉伸地图让它显示，或者不要设置任何东西让它适合父容器。

有关地图控制的更多详情，请参阅official sample。有关使用XAML进行布局的更多详细信息，请参阅this document。

Answer 2

编辑：（1月30日17日）

好的，我应该看到这一个问题，问题不在于layout只是编写了UI代码，以至于它将所有的注意力集中在UI布局上，我认为这导致了地图不显示。

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

CacheMode="BitmapCache"导致问题的原因：

目前已禁用缓存。地图图块是动态生成的。如果启用了缓存并且数据发生了更改，那么最终可能会出现两个没有排列数据的磁贴。

解决方法：

您应该只在应用程序中加载一次映射，并在需要时在页面中重复使用它，以避免由bing映射导致的内存泄漏。

要这样做，您必须在主页面上加载地图，创建一个静态变量来访问地图，然后当您的子页面加载重新定位＆amp;根据需要调整地图大小。

MapControl的最终用户界面代码：

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

良好做法：

在@Sunteen的回答中，我们不建议使用硬编码的height和Width，使用400px的{{1}}会将您的布局从较小的屏幕上移开屏幕尺寸。建议您将地图元素自适应多个屏幕尺寸，因为它是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>。这种方式可以使您在屏幕尺寸比率上比屏幕尺寸像素更多地工作（这种方法更具适应性）。

有关自适应布局的更多信息，请参阅My Answer Here。问题是Windows Phone 8，但适用相同的规则。

地图控制不会显示UWP XAML

2 个答案:

编辑：（1月30日17日）

良好做法：