Bing Maps SDK for Windows Store apps 1.基本使用-在地图上显示自己的位置

先上运行截图（都在模拟器中测试）：
1.初始界面

2下面是定位后他截图

必应地图有三种模式：道路（默认）、空中、鸟瞰。
下面是空中模式

下面是鸟瞰模式(SDK自带了缩放功能，在电脑上可以用鼠标滚轮缩放)

在不同定位精度下，程序中使用了不同个定位图标，也就是中间的那个圆点。

一、开发环境：
Windows 8 RTM
Visual Studio 2012 RTM

二、下载SDK下载地址：http://visualstudiogallery.msdn.microsoft.com/bb764f67-6b2c-4e14-b2d3-17477ae1eaca/
SDK文件名为：Bing.Maps.vsix
下载完成后双击安装

三、获取Bing 地图密钥
登陆https://www.bingmapsportal.com/
如果已经有Windows Live ID可以直接登录，如果没有先注册一个。
登陆后在左边导航栏中选择Create or view keys
在Create key 时Application type 需要选择Windows Store app
该地图密钥会在后面地图控件的属性Credentials中用到。没有正确的地图密钥地图控件将无法正常使用。

四、创建新项目
新项目这里取名叫“Win8BingMaps”

五、设置目标平台
在Visual Studio 菜单栏中选择“生成”->"配置管理器"
将活动解决方案平台”设置为 x86 或 x64。我这边设置成x64后，在设计视图无法显示地图，但可以运行。x86一切正常。
设置截图如下：

六、添加Bing地图引用
在解决方案资源管理器中，右键单击“引用”并将引用添加到“Bing Maps for C#, C++, or Visual Basic”和“Microsoft Visual C++ Runtime Package”中。
截图如下：

七、设置位置功能
打开 Package.appxmanifest 文件并转到“功能”选项卡。 选择“位置”功能。要不然就不能使用定位功能了。

八、程序设计
以上设置完成后终于可以写程序了。本示例共有一个页面和两个用户控件。
先说用户控件。这两个用户控件就是在地图上显示当前位置的那个圆点，这里叫定位图标。不同的定位精度下使用了不同的定位图标。
定位精度10米内的用LocationIcon10m.xaml，定位精度100米内的用LocationIcon100m.xaml。
这两个用户控件都没有额外的后台代码，前台XAML也简单，就是几个不同颜色的圆叠加在一起。
前台XAML如下：

LocationIcon10m.xaml 
 1 <UserControl
 2     x:Class="Win8BingMaps.LocationIcon10m"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:Win8BingMaps"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d"
 9     d:DesignHeight="300"
10     d:DesignWidth="400">
11     <Canvas>
12         <Ellipse Height="25" Width="25" Fill="#FFF0F0F0" Margin="-12.5,-12.5,0,0"></Ellipse>
13         <Ellipse Height="20" Width="20" Fill="Black" Margin="-10,-10,0,0"></Ellipse>
14         <Ellipse Height="10" Width="10" Fill="White" Margin="-5,-5,0,0"></Ellipse>
15     </Canvas>
16 </UserControl>
LocationIcon100m.xaml 
 1 <UserControl
 2     x:Class="Win8BingMaps.LocationIcon100m"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:Win8BingMaps"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d"
 9     d:DesignHeight="300"
10     d:DesignWidth="400">
11 
12     <Canvas>
13         <Ellipse Height="55" Width="55" Fill="Black" Opacity=".35" Margin="-27.5,-27.5,0,0"></Ellipse>
14         <Ellipse Height="50" Width="50" Fill="CornflowerBlue" Opacity=".65" Margin="-25,-25,0,0"></Ellipse>
15         <Ellipse Height="25" Width="25" Fill="#FFF0F0F0" Margin="-12.5,-12.5,0,0"></Ellipse>
16         <Ellipse Height="20" Width="20" Fill="Black" Margin="-10,-10,0,0"></Ellipse>
17         <Ellipse Height="10" Width="10" Fill="White" Margin="-5,-5,0,0"></Ellipse>
18     </Canvas>
19 </UserControl>

然后就是一个MainPage页面
前台XAML如下：

MainPage.xaml 
 1 <Page
 2     x:Class="Win8BingMaps.MainPage"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:Win8BingMaps"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d"
 9     xmlns:Maps="using:Bing.Maps">
10     <Page.Resources>
11         <Style TargetType="TextBlock">
12             <Setter Property="FontSize" Value="20"/>
13         </Style>
14     </Page.Resources>
15 
16     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
17         <Grid.ColumnDefinitions>
18             <ColumnDefinition Width="200"/>
19             <ColumnDefinition Width="*"/>
20         </Grid.ColumnDefinitions>
21         <StackPanel>
22             <!--下面两个Button同一时间只有一个能使用，通过后台代码来控制。-->
23             <Button x:Name="MapLocationButton" Content="定位我的位置" Click="MapLocationButton_Click"/>
24             <Button x:Name="CancelGetLocationButton" Content="取消定位" Click="CancelGetLocationButton_Click"/>
25             <TextBlock x:Name="txtMsg"/>
26             <TextBlock Text="纬度:"/>
27             <TextBlock x:Name="txtLatitude"/>
28             <TextBlock Text="经度:"/>
29             <TextBlock x:Name="txtLongitude"/>
30             <TextBlock Text="精确度:"/>
31             <TextBlock x:Name="txtAccuracy"/>
32         </StackPanel>
33         <Maps:Map x:Name="Map" Credentials="你的Bing地图密钥" Grid.Column="1"/>
34     </Grid>
35 </Page>

后台C#如下

MainPage.xaml.cs 
  1 using Bing.Maps;
  2 using System;
  3 using System.Collections.Generic;
  4 using System.IO;
  5 using System.Linq;
  6 using System.Threading;
  7 using System.Threading.Tasks;
  8 using Windows.Devices.Geolocation;
  9 using Windows.Foundation;
 10 using Windows.Foundation.Collections;
 11 using Windows.UI.Xaml;
 12 using Windows.UI.Xaml.Controls;
 13 using Windows.UI.Xaml.Controls.Primitives;
 14 using Windows.UI.Xaml.Data;
 15 using Windows.UI.Xaml.Input;
 16 using Windows.UI.Xaml.Media;
 17 using Windows.UI.Xaml.Navigation;
 18 
 19 namespace Win8BingMaps
 20 {
 21     public sealed partial class MainPage : Page
 22     {
 23         private Geolocator geolocator = null;
 24         private CancellationTokenSource cts = null;
 25         //当精确度小于等于10时使用的定位图标
 26         LocationIcon10m locationIcon10m;
 27         //当精确度小于等于100时使用的定位图标
 28         LocationIcon100m locationIcon100m;
 29         public MainPage()
 30         {
 31             this.InitializeComponent();
 32             Map.HomeRegion = "US";//目前只支持美国。如果电脑上的区域设置不是美国的话，一定要用这句话设置，不然地图不能用。
 33             geolocator = new Geolocator();
 34             locationIcon10m = new LocationIcon10m();
 35             locationIcon100m = new LocationIcon100m();
 36         }
 37 
 38         protected override void OnNavigatedTo(NavigationEventArgs e)
 39         {
 40             //进入本页面后立即设置两个按钮的可用性
 41             MapLocationButton.IsEnabled = true;
 42             CancelGetLocationButton.IsEnabled = false;
 43         }
 44 
 45         async private void MapLocationButton_Click(object sender, RoutedEventArgs e)
 46         {
 47             MapLocationButton.IsEnabled = false;
 48             CancelGetLocationButton.IsEnabled = true;
 49 
 50             //移除上一次的定位图标（如果有的话）
 51             if (Map.Children.Count > 0)
 52             {
 53                 Map.Children.RemoveAt(0);
 54             }
 55 
 56             try
 57             {
 58                 cts = new CancellationTokenSource();
 59                 CancellationToken token = cts.Token;
 60                 txtMsg.Text = "定位中...";
 61                 // 获得当前的位置
 62                 Geoposition pos = await geolocator.GetGeopositionAsync().AsTask(token);
 63                 txtMsg.Text = string.Empty;
 64                 Location location = new Location(pos.Coordinate.Latitude, pos.Coordinate.Longitude);
 65 
 66                 double zoomLevel;//地图缩放级别
 67 
 68                 // 根据定位精确度来设置不同的地图缩放级别，并显示不同的定位图标。
 69                 if (pos.Coordinate.Accuracy <= 10)//GPS级别精度
 70                 {
 71                     Map.Children.Add(locationIcon10m);//将10米定位图标作为地图的子元素添加到地图上
 72                     MapLayer.SetPosition(locationIcon10m, location);//设置10米定位图标的位置
 73                     zoomLevel = 15.0f;
 74                 }
 75                 else if (pos.Coordinate.Accuracy <= 100)//Wi-Fi级别精度
 76                 {
 77                     Map.Children.Add(locationIcon100m);//将100米定位图标作为地图的子元素添加到地图上
 78                     MapLayer.SetPosition(locationIcon100m, location);//设置100米定位图标的位置
 79                     zoomLevel = 14.0f;
 80                 }
 81                 else//IP级别精度
 82                 {
 83                     //当精确度大于100米时，不显示定位图标。
 84                     zoomLevel = 13.0f;
 85                 }
 86 
 87                 //根据位置和缩放级别来显示地图
 88                 Map.SetView(location, zoomLevel);
 89 
 90                 //显示位置信息
 91                 txtLatitude.Text = pos.Coordinate.Latitude.ToString();
 92                 txtLongitude.Text = pos.Coordinate.Longitude.ToString();
 93                 txtAccuracy.Text = pos.Coordinate.Accuracy.ToString();
 94             }
 95             catch (System.UnauthorizedAccessException)
 96             {
 97                 txtMsg.Text = "定位不可用";
 98                 txtLatitude.Text = "没有数据";
 99                 txtLongitude.Text = "没有数据";
100                 txtAccuracy.Text = "没有数据";
101             }
102             catch (TaskCanceledException)
103             {
104                 txtMsg.Text = "定位已取消";
105             }
106             finally
107             {
108                 cts = null;
109             }
110 
111             MapLocationButton.IsEnabled = true;
112             CancelGetLocationButton.IsEnabled = false;
113         }
114 
115         private void CancelGetLocationButton_Click(object sender, RoutedEventArgs e)
116         {
117             if (cts != null)
118             {
119                 cts.Cancel();
120                 cts = null;
121             }
122             MapLocationButton.IsEnabled = true;
123             CancelGetLocationButton.IsEnabled = false;
124         }
125 
126         protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
127         {
128             //离开本页面前取消定位释放资源
129             if (cts != null)
130             {
131                 cts.Cancel();
132                 cts = null;
133             }
134             base.OnNavigatingFrom(e);
135         }
136     }
137 }

 

posted @ 2013-01-20 20:27  成宇佳  阅读(2539)  评论(0)  编辑  收藏  举报