地图控件不会显示 UWP XAML [英] Map Control won't show up UWP XAML

查看：17
本文介绍了地图控件不会显示 UWP XAML的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

public MainPage(){this.InitializeComponent();MapMain.Loaded += MapMain_Loaded;}私有无效 MapMain_Loaded(对象发送者，RoutedEventArgs e){Debug.WriteLine("地图加载完毕！");}

这是我的 XAML 代码:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Maps:MapControl Horizo​​ntalAlignment="Left" Margin="404,86,0,0" VerticalAlignment="Top"x:Name="MapMain"MapServiceToken="<我的地图密钥在这里！>"ZoomInteractionMode="GestureAndControl"TiltInteractionMode="GestureAndControl" CacheMode="BitmapCache" CanDrag="True"/></网格></页面>

对可能是什么问题以及如何修复它有任何想法吗?谢谢

<小时>

<<<更新(2017 年 1 月 25 日)>>>

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

<小时>

<<<更新(2017 年 1 月 27 日)>>>

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

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Maps:MapControl Horizo​​ntalAlignment="Left" Margin="92,53,0,0" VerticalAlignment="Top"x:Name="MapMain"MapServiceToken="<<<我的地图密钥>>>"高度=400"宽度=400"ZoomInteractionMode="GestureAndControl"TiltInteractionMode="GestureAndControl" Background="#FF3BCFCF" ZoomLevel="2"/></网格></页面>

解决方案

(17 年 1 月 30 日)

好吧，我应该看到这个问题，这个问题并不是关于 layout 只是 UI 代码的编写使得它把所有的注意力都放在了 UI 布局上，我认为这是造成的地图不显示.

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

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

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

解决办法:

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

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

MapControl 的最终 UI 代码:

良好做法:

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

应该怎么做:

另一种使用自适应布局显示地图的方法是使用 RowDefinitions 和 ColumnDefinitions 设置自适应高度和宽度并设置 Horizo​​ntalAlignment=伸展"VerticalAlignment="Stretch" 这样您的地图控件将被绑定到一个区域，并通过 RowDefinitions 和 ColumnDefinitions 调整自身以适应屏幕尺寸的变化.所以你的代码看起来像下面这样:

<Grid.RowDefinitions><RowDefinition Height=*"/><RowDefinition Height=*"/><RowDefinition Height=*"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width=*"/><ColumnDefinition Width=*"/><ColumnDefinition Width=*"/></Grid.ColumnDefinitions><地图:地图控件x:Name=MapMain"水平对齐=拉伸"VerticalAlignment=拉伸"Grid.Row=1"Grid.Column=1"CanDrag=真"TiltInteractionMode=GestureAndControl"ZoomInteractionMode=GestureAndControl"/></网格>

要根据您想要的地图有多大以及您的布局如何重新定位地图，您可以

  1. 添加更多行/列定义，甚至在不需要时删除一些.
  2. 通过分别更改高度/宽度来调整行/列定义覆盖的区域的大小，这样做时请确保在*"的因素中这样做；例如:.通过这种方式，您可以更多地处理屏幕尺寸比例而不是屏幕尺寸像素(这种方法更具适应性).

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

I'm trying to run a simple UWP application on my PC to test the Map Control, using the guidelines in:

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

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.

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!");
}

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

<<< UPDATE (Jan 25 2017) >>>

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.

<<< UPDATE (Jan 27 2017) >>>

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>

解决方案

Edit: (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.

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,

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.

The Work around:

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.

Your final UI code for the MapControl:

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

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.

What should be done:

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,

  1. Add more Row/Column Definitions or even remove a few if not needed.
  2. 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).

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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆