如何使用 Windows Phone 的 Bing 地图 Silverlight 控件

2012/2/9

本主题介绍如何使用 Windows Phone 的 Bing 地图 Silverlight 控件。若要找到这个完成的地图控件示例,请参阅 Windows Phone 的代码示例

注意注意:

以下过程中的步骤用于 Visual Studio 2010 Express for Windows Phone。 当您使用用于 Visual Studio 2010 Professional 或 Visual Studio 2010 Ultimate 的插件时,您可能会看到菜单命令或窗口布局中的一些微小改变。

本主题介绍如何在 Windows Phone 项目中使用 Bing 地图 Silverlight 控件。完成的示例包括地图控件并提供两个用于在“道路模式”“航测模式”之间更改地图模式的按钮,以及两个用于缩放地图的按钮。

创建新项目的步骤

  1. 确保您已从应用程序中心下载并安装了 Windows Phone SDK。

  2. 从 Windows“开始”菜单启动 Visual Studio 2010 Express for Windows Phone。

  3. 通过单击“文件 | 新建项目”菜单命令来创建一个新项目。

  4. 将显示“新建项目”窗口。展开 Visual C# 模板,然后选择 Silverlight for Windows Phone 模板。

  5. 选择“Windows Phone 应用程序”模板。填写所需的项目“名称”

  6. 单击“确定”。将创建一个新项目并在 Visual Studio 设计器窗口中打开 MainPage.xaml

下一步是使用 Visual Studio 设计器对应用程序的控件进行布置。添加控件之后,最终布局将类似于以下屏幕截图:

MapLayout

添加应用程序控件的步骤

  1. 在 Visual Studio 的“工具箱”中,选择“地图”控件。在设计器上创建一个新的“地图”控件。该控件的默认名称为 map1

  2. 在 Visual Studio 的“工具箱”中,选择“按钮”控件。在设计器上的“地图”控件下面,创建四个新的“按钮”控件。将四个按钮中的文本设置为“道路模式”“航测模式”“放大”“缩小”。将这四个按钮命名为 buttonRoadbuttonAerialbuttonZoomInbuttonZoomOut

            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <my:Map Height="462" HorizontalAlignment="Left" Margin="6,6,0,0" Name="map1" VerticalAlignment="Top" Width="444" />
    
                <Button Content="Road Mode" Height="72" HorizontalAlignment="Left" Margin="6,474,0,0" Name="buttonRoad" VerticalAlignment="Top" Width="207" />
                <Button Content="Aerial Mode" Height="72" HorizontalAlignment="Left" Margin="243,474,0,0" Name="buttonAerial" VerticalAlignment="Top" Width="207" />
                <Button Content="Zoom In" Height="72" HorizontalAlignment="Left" Margin="6,535,0,0" Name="buttonZoomIn" VerticalAlignment="Top" Width="207" />
                <Button Content="Zoom Out" Height="72" HorizontalAlignment="Left" Margin="243,535,0,0" Name="buttonZoomOut" VerticalAlignment="Top" Width="207" />
            </Grid>
    
    
    
  3. 如果您希望图像上显示完全相同的布局,则复制并粘贴上面的 XAML 并使用它来替换 MainPage.xaml 文件中的网格布局。

  4. 也可以根据需要重命名应用程序窗口标题。

该步骤将添加代码以实现四个按钮。

添加代码的步骤

  1. MainPage.xaml.cs 文件中的 using Microsoft.Phone.Controls.Maps; 添加一个 using 语句。

  2. 双击“道路模式”按钮控件。这将在 MainPage.xaml.cs 文件中创建一个 buttonRoad_Click 事件处理程序。通过设置此模式来实现该方法:

            private void buttonRoad_Click(object sender, RoutedEventArgs e)
            {
                map1.Mode = new RoadMode();
            }
    
    
  3. 双击“航测模式”按钮控件。这将在 MainPage.xaml.cs 文件中创建一个 buttonAerial_Click 事件处理程序。通过设置此模式来实现该方法:

            private void buttonAerial_Click(object sender, RoutedEventArgs e)
            {
                map1.Mode = new AerialMode();
            }
    
    
  4. 双击“放大”按钮控件。这将在 MainPage.xaml.cs 文件中创建一个 buttonZoomIn_Click 事件处理程序。通过设置缩放值来实现该方法:

            private void buttonZoomIn_Click(object sender, RoutedEventArgs e)
            {
                double zoom;
                zoom = map1.ZoomLevel;
                map1.ZoomLevel = ++zoom;
            }
    
    
  5. 双击“缩小”按钮控件。这将在 MainPage.xaml.cs 文件中创建一个 buttonZoomOut_Click 事件处理程序。通过设置缩放值来实现该方法:

            private void buttonZoomOut_Click(object sender, RoutedEventArgs e)
            {
                double zoom;
                zoom = map1.ZoomLevel;
                map1.ZoomLevel = --zoom;
            }
    
    
  6. 将更新按钮的 XAML 以包含事件处理程序:

            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <my:Map Height="462" HorizontalAlignment="Left" Margin="6,6,0,0" Name="map1" VerticalAlignment="Top" Width="444" />
                <Button Content="Zoom In" Height="72" HorizontalAlignment="Left" Margin="6,535,0,0" Name="buttonZoomIn" VerticalAlignment="Top" Width="207" Click="buttonZoomIn_Click" />
                <Button Content="Road Mode" Height="72" HorizontalAlignment="Left" Margin="6,474,0,0" Name="buttonRoad" VerticalAlignment="Top" Width="207" Click="buttonRoad_Click" />
                <Button Content="Zoom Out" Height="72" HorizontalAlignment="Left" Margin="243,535,0,0" Name="buttonZoomOut" VerticalAlignment="Top" Width="207" Click="buttonZoomOut_Click" />
                <Button Content="Aerial Mode" Height="72" HorizontalAlignment="Left" Margin="243,474,0,0" Name="buttonAerial" VerticalAlignment="Top" Width="207" Click="buttonAerial_Click" />
            </Grid>
    
    
    

现在,应用程序已经完成。该步骤将允许您生成、运行和调试应用程序。

MapRunning
注意注意:

运行此示例时,地图控件的背景将显示一个“无效凭据”的消息。您可以阅读获取 Bing 地图键使用 Bing 地图键访问控件以获得有关如何获取和使用键的说明。

生成和调试应用程序的步骤

  1. 通过选择“调试 | 生成解决方案”菜单命令来生成解决方案。应该生成该项目并且“错误列表”窗口中没有任何错误。您可以通过选择“查看 | 其他窗口 | 错误列表”菜单命令来打开“错误列表”窗口(如果该窗口尚未打开)。如果出现错误,检查以上步骤并改正错误,然后再次生成解决方案。

  2. 通过选择“调试 | 开始调试”菜单命令运行该应用程序。这将打开模拟器窗口并启动该应用程序。确保您的台式计算机拥有 Internet 访问权限。然后通过单击按钮并验证地图控件的响应来测试应用程序。

  3. 您可以通过将光标放在所需的代码行上并选择“调试 | 切换断点”菜单命令在代码中设置调试断点。

  4. 若要停止调试,您可以选择“调试 | 停止调试”菜单命令。

显示: