先上运行截图(都在模拟器中测试):
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如下:
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>
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如下:
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#如下
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 }