地图控件不会显示UWP XAML [英] Map Control won't show up UWP XAML
问题描述
我试图使用以下指导原则在PC上运行一个简单的UWP应用程序以测试Map Control:
I'm trying to run a simple UWP application on my PC to test the Map Control, using the guidelines in:
我已经从Bing Maps开发中心获得了地图密钥，并将其分配给地图控件.
I have obtained a map key from Bing Maps Dev Center and assigned it to the map control.
但是，在设计器中，该控件显示为仅当应用程序正在运行时才启用此元素"消息.
However, in the designer the control is shown up with a "This element is enabled only when the application is running" message.
运行应用程序时，应用程序屏幕上没有任何显示.
When I run the application, nothing is displayed on the application screen.
要检查地图是否已加载，我为地图的Loaded事件添加了一个处理程序，以在输出窗格上显示一条消息，并且该消息显示得很好.
To check if the map is loaded, I added a handler for the Loaded event of the map to display a message on the output pane, and the message was displayed fine.
public MainPage()
{
this.InitializeComponent();
MapMain.Loaded += MapMain_Loaded;
}
private void MapMain_Loaded(object sender, RoutedEventArgs e)
{
Debug.WriteLine("Map is loaded!");
}
这是我的XAML代码:
Here is my XAML Code:
<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>
关于可能是什么问题以及如何解决的任何想法?谢谢
Any thoughts on what could be the issue and how it can be fixed? Thanks
<<<更新(2017年1月25日)>>>
<<< UPDATE (Jan 25 2017) >>>
我根据@Sunteen和@Aditya的答案更改了地图的宽度和高度属性.但是，我只看到一个空白的地图框，如下图所示.我只看到地图背景.
I changed width and height attributes of the map as per answers by @Sunteen and @Aditya. However, I only see a blank map frame, as shown in the below picture. I only see the map background.
<<<更新(2017年1月27日)>>>
<<< UPDATE (Jan 27 2017) >>>
根据Aditya的建议，我在下面添加了我的XAML代码以包括所做的更改:
As per Aditya's suggestion, I added my XAML code below to including the changes I made:
<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>
推荐答案
(2017年1月30日)
好吧，我应该已经看到了这一点，layout的问题不仅仅在于UI代码是这样编写的，它把所有焦点都集中在UI布局上，而且我认为这导致地图无法显示.
(30 Jan 17)
Okay I should have seen this one coming, The issue not really about the layout just that the UI code was written such that it took all the focus to the UI layout and I thought that was causing the map to not show.
原因:未显示地图是由于您要设置的CacheMode="BitmapCache"属性.删除它，您应该能够以引人入胜的方式查看您的地图.现在您可以看到您的地图，让我们了解为什么CacheMode="BitmapCache"导致此问题
The reason: The map is not showing is because of the CacheMode="BitmapCache" property you're setting. Remove that and you should be able to see your map in a charming way. Now that you can see your map let's understand why is the CacheMode="BitmapCache"causing the issue,
为什么CacheMode="BitmapCache"引起了该问题:
Why the CacheMode="BitmapCache" is causing the issue:
当前禁用缓存.地图图块是动态生成的.如果启用了缓存，并且数据发生了变化，则可能会导致两个图块的数据不对齐.
Caching is currently disabled. The map tiles are dynamically generated. If caching was enabled and a change happened to the data it's possible that you would end up with two tiles with data that doesn't line up.
解决方法:
您仅应在应用程序中加载一次映射，并在需要时跨页面重用它，以避免bing映射引起的内存泄漏.
You should only load the map once in your application and reuse it across pages if needed to avoid the memory leak caused by the bing map.
为此，您必须在主页上加载地图，创建一个静态变量以访问地图，然后在子页面加载时重新定位&根据需要调整地图大小.
To do so, you have to load the map on the main page, create a static variable to access the map, and then when your sub-page loads re-position & resize the map as needed.
您的MapControl最终UI代码:
<Maps:MapControl
x:Name="MapMain"
ZoomInteractionMode="GestureAndControl"
TiltInteractionMode="GestureAndControl"
CacheMode="BitmapCache"
CanDrag="True"/>
良好做法:
在@Sunteen的答案中，不建议使用硬编码的height和Width，而使用Margin的400px只会在较小的屏幕尺寸上将布局显示在屏幕之外.建议将地图元素保持为适应UWP应用的多种屏幕尺寸，因此请避免使用Margin或对Height和Width进行硬编码.
Good Practices:
In @Sunteen's answer it would not be advised to use hard coded height and Width and using 400px of Margin would just throw your layout out of screen on smaller screen sizes. It would be advised to keep your map element adaptive to multiple screen sizes as it's a UWP app, so avoid using Margin or hard coding the Height and the Width.
应该做什么:
使用自适应布局显示地图的另一种方法是使用RowDefinitions和ColumnDefinitions设置自适应高度和宽度并设置HorizontalAlignment="Stretch" VerticalAlignment="Stretch"，这样您的地图控件将被绑定到一个区域并将使用RowDefinitions和ColumnDefinitions适应屏幕尺寸的变化.因此您的代码如下所示:
Another way of getting your map to show using adaptive layout would be to use RowDefinitions and ColumnDefinitions to set the adaptive height and width and set the HorizontalAlignment="Stretch" VerticalAlignment="Stretch" this ways your map control will be bound to a area and would adapt itself to change in screensizes with the RowDefinitions and ColumnDefinitions. So your code would look something like below:
<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>
要根据您想要的地图大小和布局的大小来重新放置地图，可以
To reposition the map based on how big you want the map and how your layout is, you can,
- 添加更多行/列定义，甚至在不需要时删除一些.
- 通过分别更改高度/宽度来调整行/列定义所覆盖的区域的大小，在执行此操作时，请确保以"*"为因数，例如:
<RowDefinition Height="5*"/>.这样，您将在屏幕尺寸比率上比在屏幕尺寸像素上工作更多(这种方法更具适应性).
- Add more Row/Column Definitions or even remove a few if not needed.
- Resize the area covered by the Row/Column definitions by changing the Height/Width respectively, when doing so please make sure you do so in the factors of "*" for eg:
<RowDefinition Height="5*"/>. This ways you would work more on screen size ratios than screen size pixel (this approach is more adaptive).
有关自适应布局的更多信息，请参见我的答案在这里.问题是Windows Phone 8，但适用相同的规则.
For more information on adaptive layout refer My Answer Here. The question is for a windows phone 8 but the same rules would apply.
这篇关于地图控件不会显示UWP XAML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
