说明
本篇将介绍如何将地图以动画显示呈现,在以下的范例介绍中可以看到有动画跟没动画的差别,如果你的地图还是很单调的话,不仿加上这个设计,让使用者觉得更有趣。
?
结果
如左下图,按 [海生馆] 钮会直接显示海生馆的地图位置。如右下图,按 [美术馆(动画)] 时,会以动画缩放方式来呈现美术馆的地图位置。
?
?
Step1 建专案
Step2 设定应用程式使用Map功能
?
Step3 画面设计
加入两个按钮控制项一个地图控制项
1. Button控制项,Name->btn1、Content->海生馆
2. Button控制项,Name->btn2、Content->美术馆(动画)
3. Map控制项,Name->map1
产生的XAML程式码如下
Step3 事件处理函式
在MainPage.xaml.cs里建立btn1和btn2和Loaded事件的副程式
// 建构函式
public MainPage()
{
InitializeComponent();
// 将 ApplicationBar 当地语系化的程式码范例
//BuildLocalizedApplicationBar();
btn1.Click += btn1_Click;
btn2.Click += btn2_Click;
Loaded += MainPage_Loaded;
}
// 美术馆地图
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
map1.Center = new System.Device.Location.GeoCoordinate(24.1409401, 120.6635119);
map1.ZoomLevel = 15;
}
// 美术馆地图,缩放动画
void btn2_Click(object sender, RoutedEventArgs e)
{
map1.SetView(new System.Device.Location.GeoCoordinate(24.1409401, 120.6635119), 16, Microsoft.Phone.Maps.Controls.MapAnimationKind.Parabolic);
}
// 海生馆地图,无动画
void btn1_Click(object sender, RoutedEventArgs e)
{
map1.Center = new System.Device.Location.GeoCoordinate(22.0316752, 120.6888715);
map1.ZoomLevel = 12;
}
结语
?
只有几行简单程式,却让你的地图变得生动了,各位开发者别忘了在地图上加上这动画功能唷,有时候简单的地图动画与单调的地图相比之下,会让使用这是不是想长时间用这App唷!最近都在研究地图相关应用,有地图相关的技术就会发上来跟大家分享^0^。
?
DotBlogs Tags: 地图