Win8.1应用开发之Bing Maps
Posted brucemengbm
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Win8.1应用开发之Bing Maps相关的知识，希望对你有一定的参考价值。
这里介绍怎样进行Bing Maps的开发。首先我们须要在我们的程序中引入Bing Map的SDK。详细方法，这里推荐一个链接<win8>使用Bing地图。这样一个hello world便出来了。这里主要介绍一些主要的API。进行一些基础性的开发。
在整个开发中，给我感触最深的是。在网上资料稀少的情况下。查看研究Bing Map给出的API是最有效的方法（Map API）。
或许API的凝视是模棱两可，但仅仅要我们去试。便能了解这些方法的功能。
假设遇到hello world不能显示地图，在C#文件里类的构造方法中加入myMap.HomeRegion = "US"（myMap是XAML中定义的Map，详细见以下的演示样例代码）
using Windows.UI; using Windows.UI.Popups; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍 namespace demo02 { /// <summary> /// 可用于自身或导航至 Frame 内部的空白页。
/// </summary> public sealed partial class BingMap : Page { public BingMap() { this.InitializeComponent(); myMap.HomeRegion = "US"; } } }
（一）加入图钉：
<Page
x:Class="demo02.BingMap"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:demo02"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:bm="using:Bing.Maps"
xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<bm:Map Credentials="AjOotBEFXeb3VJcFYETEqh3TesW_gf0_r5n54lBYg7pHBZWpVGuMusmccZXyMx--" x:Name="myMap">
<bm:Map.Center>
<bm:Location Latitude="37.52" Longitude="121.39" />
</bm:Map.Center>
<bm:Map.Children>
<bm:Pushpin Tapped="JinanTapped" >
<bm:MapLayer.Position>
<bm:Location Latitude="36.65" Longitude="117" />
</bm:MapLayer.Position>
</bm:Pushpin>
<bm:Pushpin Tapped="BeijingTapped">
<bm:MapLayer.Position>
<bm:Location Latitude="39.92" Longitude="116.46" />
</bm:MapLayer.Position>
</bm:Pushpin>
<bm:Pushpin Tapped="GuangzhouTapped">
<bm:MapLayer.Position>
<bm:Location Latitude="23.16" Longitude="113.23" />
</bm:MapLayer.Position>
</bm:Pushpin>
</bm:Map.Children>
</bm:Map>
</Grid>
</Page>
xmlns:bm="using:Bing.Maps"将SDK引入程序。
Pushpin是图钉，Tapped是点击该图钉触发的方法。方法在C#文件里定义。Location的属性有经纬度。这是图钉在地图上的坐标。除了在XAML中静态设置图钉，我们还能够通过编程动态加入。
using Bing.Maps;
using demo02.DataStructure;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍
namespace demo02
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class BingMap : Page
{
public BingMap()
{
this.InitializeComponent();
myMap.HomeRegion = "US";
myMap.SetZoomLevel(4.3, MapAnimationDuration.None); // 设置缩放尺度。这样地图便会放大到想要的区域，如今整个画面显示的是中国地区
//用代码标注图钉
//用图钉标注华北区
var pushpin = new Pushpin();
ToolTipService.SetToolTip(pushpin, "北京"); //鼠标放在图钉上会出现的文字提示
MapLayer.SetPosition(pushpin, new Location(39.92, 116.46)); //图钉的经纬度
pushpin.Tapped += BJTapped; //点击图钉触发的方法
myMap.Children.Add(pushpin);
}
private void BJTapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
myMap.MapType = MapType.Birdseye; //设置俯视模式
Location location = new Location();
//北京经纬度
location.Latitude = 39.92;
location.Longitude = 116.46;
myMap.SetView(location, 12); //将视图放大到北京地区
//用图钉标注北京大学
var pushpin = new Pushpin();
ToolTipService.SetToolTip(pushpin, "Peking University 北京大学");
MapLayer.SetPosition(pushpin, new Location(39.9890077, 116.302251));
myMap.Children.Add(pushpin);
//用图钉标注清华大学
var pushpin01 = new Pushpin();
ToolTipService.SetToolTip(pushpin01, "Tsinghua University 清华大学");
MapLayer.SetPosition(pushpin01, new Location(40.000531, 116.326319));
myMap.Children.Add(pushpin01);
}
}
}
或许对于鼠标移到图钉上的文字显示的样式不惬意。比方某个图钉是一个景点，当我们将鼠标移到它上面是时，最好能出现照片。
这时可借助样式Style。
在App.xaml中加入例如以下：
<Style TargetType="ToolTip" x:Key="okStyle">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border CornerRadius="5">
<Border.Background>
<SolidColorBrush Color="Black" Opacity="0.5"/>
</Border.Background>
<ContentPresenter Margin="5">
<ContentPresenter.Content>
<StackPanel Margin="5" MaxWidth="200" MinHeight="80">
<TextBlock Text="山东大学 SHANDONG UNIVERSITY" FontSize="12" Foreground="White"/>
<Image Source="Images/EC/SD/SDU/sdu.jpg" Grid.ColumnSpan="5" Margin="0,0,0,10" Stretch="Fill" />
</StackPanel>
</ContentPresenter.Content>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>位置是：
<Application
x:Class="demo02.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:demo02"
xmlns:RssData="using:demo02.EasyAccess.RssReader"
xmlns:localData="using:demo02.Data">
<Application.Resources>
<!-- 应用程序特定的资源-->
<!--<x:String x:Key="AppName">WhereWeGo</x:String>-->
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!--
Styles that define common aspects of the platform look and feel
Required by Visual Studio project and item templates
-->
<!--<ResourceDictionary Source="Common/StandardStyles.xaml"/>-->
<!-- Add app resurces to this resource dictionary -->
<ResourceDictionary>
<RssData:FeedDataSource x:Key="feedDataSource"/>
<!-- Add the DateConverter here. -->
<!--<RssData:DateConverter x:Key="dateConverter" />-->
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
<Style TargetType="ToolTip" x:Key="okStyle">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border CornerRadius="5">
<Border.Background>
<SolidColorBrush Color="Black" Opacity="0.5"/>
</Border.Background>
<ContentPresenter Margin="5">
<ContentPresenter.Content>
<StackPanel Margin="5" MaxWidth="200" MinHeight="80">
<TextBlock Text="山东大学 SHANDONG UNIVERSITY" FontSize="12" Foreground="White"/>
<Image Source="Images/EC/SD/SDU/sdu.jpg" Grid.ColumnSpan="5" Margin="0,0,0,10" Stretch="Fill" />
</StackPanel>
</ContentPresenter.Content>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>这样样式便定义好了。接下来看怎样使用：
//用图钉标注山东大学36.677549,117.054218
var pushpin = new Pushpin();
//ToolTipService.SetToolTip(pushpin, "山东大学");
ToolTipService.SetToolTip(pushpin, new ToolTip()
{
Style = Application.Current.Resources["okStyle"] as Style
});
MapLayer.SetPosition(pushpin, new Location(36.677549, 117.054218));
pushpin.Tapped += SDU01Tapped;
myMap.Children.Add(pushpin);（二）连线：
有了点，以下是线。能描绘出一块指定区域。
以下的代码将山大济南六个校区连接起来。
（PS：能够通过谷歌地图获得某个地点的API，方法是将鼠标放在某个地点，右键选择“这是哪里？”便会在搜索框中出现精确的经纬度）
//连接六大校区
MapLayer mPinLayer = new MapLayer();
myMap.Children.Add(mPinLayer);
MapShapeLayer mShapeLayer = new MapShapeLayer();
myMap.ShapeLayers.Add(mShapeLayer);
//定义要连接起来的点
LocationCollection mPolyShapeLocations01 = new LocationCollection();
mPolyShapeLocations01.Add(new Location(36.666818, 117.133137)); //软件园
mPolyShapeLocations01.Add(new Location(36.68525, 117.060184)); //洪家楼
mPolyShapeLocations01.Add(new Location(36.678625, 117.050547)); //中心
mPolyShapeLocations01.Add(new Location(36.650681, 117.013094)); //趵突泉
mPolyShapeLocations01.Add(new Location(36.650414, 117.022868)); //千佛山
mPolyShapeLocations01.Add(new Location(36.602489, 117.049045)); //兴隆山
mPolyShapeLocations01.Add(new Location(36.666818, 117.133137)); //软件园
for (int i = 0; i < mPolyShapeLocations01.Count; i++)
{
Pushpin pin = new Pushpin();
pin.Text = i.ToString();
mPinLayer.Children.Add(pin);
MapLayer.SetPosition(pin, mPolyShapeLocations01[i]);
}
//MapPolylines是连线的API，将上面定义的点连接起来
MapPolyline polyline01 = new MapPolyline();
polyline01.Color = Windows.UI.Colors.Red;
polyline01.Locations = mPolyShapeLocations01;
polyline01.Width = 5.0;
mShapeLayer.Shapes.Add(polyline01);以上是关于Win8.1应用开发之Bing Maps的主要内容，如果未能解决你的问题，请参考以下文章
Bing Maps Geographic Coverage - Bing地图图像覆盖范围
使用 Bing Maps Quadkeys 作为 Openlayers 3 Tile 源
Bing Maps C# GPX Route Viewer 无法编译：无法从 LocationCollection 转换为 LocationRect