1

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

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

我从 Bing 地图开发中心获得了地图键并将其分配给地图控件。

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

在此处输入图像描述

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

在此处输入图像描述

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

2 回答 2

2

解决问题的方法很简单。地图控件的设置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。如果我们不设置这些属性，我们可能需要拉伸地图以使其显示，或者不设置任何内容以使其适合父容器。

有关地图控制的更多详细信息，请参考官方示例。有关 XAML 布局的更多详细信息，请参考此文档。

于 2017-01-24T03:30:35.100 回答
2

编辑：（17 年 1 月 30 日）

好吧，我应该已经看到了这个问题，问题不layout在于 UI 代码的编写使得所有焦点都集中在 UI 布局上，我认为这会导致地图不显示。

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

为什么CacheMode="BitmapCache"会导致问题：

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

解决方法：

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

为此，您必须在主页上加载地图，创建一个静态变量来访问地图，然后在加载子页面时根据需要重新定位和调整地图大小。

MapControl 的最终 UI 代码：

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

良好做法：

在@Sunteen 的回答中，不建议使用硬编码height，Width而使用400pxofMargin只会在较小的屏幕尺寸上将您的布局扔出屏幕。建议让您的地图元素适应多种屏幕尺寸，因为它是一个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>

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

  1. 添加更多行/列定义，如果不需要，甚至删除一些。
  2. 通过分别更改高度/宽度来调整行/列定义所覆盖的区域，这样做时请确保在“*”的因素中这样做，例如：<RowDefinition Height="5*"/>. 通过这种方式，您将在屏幕尺寸比率上比屏幕尺寸像素工作更多（这种方法更具适应性）。

有关自适应布局的更多信息，请参阅我的答案。问题是针对 Windows Phone 8，但同样的规则也适用。

于 2017-01-24T06:37:32.453 回答