[windows phone] 教你如何使地图动画缩放

原文:[windows phone] 教你如何使地图动画缩放

说明

---

本篇将介绍如何将地图以动画显示呈现，在以下的范例介绍中可以看到有动画跟没动画的差别，如果你的地图还是很单调的话，不仿加上这个设计，让使用者觉得更有趣。

?

结果

---

如左下图，按 [海生馆] 钮会直接显示海生馆的地图位置。如右下图，按 [美术馆(动画)] 时，会以动画缩放方式来呈现美术馆的地图位置。

? ? ? ? ? ? ??

?

?

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:

地图

关连文章

[Windows phone]全域物件与变数的介绍

[Windows phone] 垂直和水平显示切换属性(Orientation)

[windows phone]如何读取图片

[Windows Phone App] 旅游的App 悠游 ∞ 台中 上架了!