这里介绍怎样进行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的更多相关文章

  1. iOS开发之Xcode常用调试技巧总结

    转载自:iOS开发之Xcode常用调试技巧总结 最近在面试,面试过程中问到了一些Xcode常用的调试技巧问题.平常开发过程中用的还挺顺手的,但你要突然让我说,确实一脸懵逼.Debug的技巧很多,比如最 ...

  2. Bing Maps进阶系列四:路由功能服务(RouteService)

    Bing Maps进阶系列四:路由功能服务(RouteService) Bing Maps提供的路由功能服务(RouteService)可以实现多方位的计算地图上的路线指示,路径行程等功能,比如说实现 ...

  3. 微信公众号开发之VS远程调试

    目录 (一)微信公众号开发之VS远程调试 (二)微信公众号开发之基础梳理 (三)微信公众号开发之自动消息回复和自定义菜单 前言 微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流 ...

  4. Android混合开发之WebViewJavascriptBridge实现JS与java安全交互

    前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...

  5. Android混合开发之WebView与Javascript交互

    前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybri ...

  6. UWP开发之Template10实践二:拍照功能你合理使用了吗?(TempState临时目录问题)

    最近在忙Asp.Net MVC开发一直没空更新UWP这块,不过有时间的话还是需要将自己的经验和大家分享下,以求共同进步. 在上章[UWP开发之Template10实践:本地文件与照相机文件操作的MVV ...

  7. UWP开发之Template10实践:本地文件与照相机文件操作的MVVM实例(图文付原代码)

    前面[UWP开发之Mvvmlight实践五:SuspensionManager中断挂起以及复原处理]章节已经提到过Template10,为了认识MvvmLight的区别特做了此实例. 原代码地址:ht ...

  8. UWP开发之Mvvmlight实践七:如何查找设备(Mobile模拟器、实体手机、PC)中应用的Log等文件

    在开发中或者后期测试乃至最后交付使用的时候,如果应用出问题了我们一般的做法就是查看Log文件.上章也提到了查看Log文件,这章重点讲解下如何查看Log文件?如何找到我们需要的Packages安装包目录 ...

  9. Android混合开发之WebView使用总结

    前言: 今天修改项目中一个有关WebView使用的bug,激起了我总结WebView的动机,今天抽空做个总结. 混合开发相关博客: Android混合开发之WebView使用总结 Android混合开 ...

随机推荐

  1. 洛谷P1450 [HAOI2008]硬币购物

    题目描述 硬币购物一共有4种硬币.面值分别为c1,c2,c3,c4.某人去商店买东西,去了tot次.每次带di枚ci硬币,买si的价值的东西.请问每次有多少种付款方法. 输入输出格式 输入格式: 第一 ...

  2. 关于Bootstrap 利用radio实现tab切换的一个问题

    1.html代码 <div class="col-sm-10 nav nav-tabs" id="typelist" role="tablist ...

  3. Html5学习进阶四 表单元素和表单属性

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...

  4. c /c++变参函数(转)

    原文转自 https://blog.csdn.net/wwzcx/article/details/8940092 实现c/c++语言的变参函数. 变参函数 :void fun(para,...) 变参 ...

  5. Linux getcwd()的实现【转】

    转自:http://www.cnblogs.com/alan-forever/p/3721908.html 通过getcwd()可以获取当前工作目录. 1 #include <unistd.h& ...

  6. flask框架基本使用(2)(响应与重定向)

    #转载请留言联系 flask 框架基本使用(1):https://www.cnblogs.com/chichung/p/9756935.html 1. flask 自定义返回状态码与响应头 from ...

  7. poj 1981(单位圆覆盖最多点问题模板)

    Circle and Points Time Limit: 5000MS   Memory Limit: 30000K Total Submissions: 7327   Accepted: 2651 ...

  8. PHP防止表单重复提交的解决方法

    PHP+SESSION防止表单重复提交 index.php 当前表单页面is_submit设为0 SESSION_START(); $_SESSION['is_submit'] = 0; <fo ...

  9. js-禁止微信H5页面点击右上角菜单时出现“复制链接”,且分享仅支持微信分享

    禁止微信H5页面点击右上角菜单时出现“复制链接”,这个问题已经影响到我很久很久了,起码有2年了, 昨天写H5活动的时候,需求有一个是:可分享,但是禁止复制活动链接, 这一下,就逼我务必好好研究研究了. ...

  10. hdu6035(树形DP)

    hdu6035 题意 给出一棵树,现在定义两点之间距离为两点间最短路径上颜色集合的大小.问任意两点间距离之和. 分析 换个方向,题目其实等价于求每种颜色在多少条路径上出现过(每种颜色对于答案的贡献), ...