[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 悠游 ∞ 台中 上架了!

时间: 2024-05-22 04:00:24

[windows phone] 教你如何使地图动画缩放的相关文章

Windows Phone 8/8.1对地图开发的改进

本文从Windows Phone 8.0到8.1两个部分来介绍WP平台为地图开发提供的功能. DirectX 我们在新版"高德地图Windows Phone 8 SDK"使用了DirectX.对比之前的Windows Phone 7 栅格版地图,DirectX带来了以下改进: 1. DirectX可以使用托管的方式和XAML交互,使地图可以以一个控件的形式出现,这样便于第三方开发者控制和使用. 图1. D3D控件演示 2. 由于WP8的硬件规格升级,使用DirectX 可以提供更高的绘

深入探究使JavaScript动画流畅的一些方法

  这篇文章主要介绍了使JavaScript动画流畅的一些方法,包括与CSS动画效果的一些对比,需要的朋友可以参考下 基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javascript的DOM动画库,如Velocity.js和GSAP,看其是如何比jQuery和CSS动画效果更具性能的. jQuery 让我们先从基础的开始: JavaScript 和 j

Windows Phone开发(36):动画之DoubleAnimation

原文:Windows Phone开发(36):动画之DoubleAnimation 从本节开始,我们将围绕一个有趣的话题展开讨论--动画. 看到动画一词,你一定想到Flash,毕竟WP应用的一个很重要的框架是Silverlight,在WP中也发挥了Silverlight的许多优点,可能不少人说,Silverlight就是和Flash差不多吧,当你深入了解了Silverlight后,你会发现,其实不然,Silverlight更偏重于数据处和企业级应用.   好了,F话不多说,开始吹我们今天的牛皮吧

Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API

原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 Store 项目中可以使用的地图主要有微软的Bing Map,目前高德地图sdk也支持Win8.Win8 Store App可以直接支持javascript编写App,除了Bing,还没有发现用于Win8 Javascript项目上的sdk.   新建一个空白的Win8 Store Javascript 项目,分别添加map.html.map.js.map.css三个文件. 使用谷歌地图

Windows Phone开发(38):动画之PointAnimation

原文:Windows Phone开发(38):动画之PointAnimation PointAnimation也是很简单的,与前面说到的两个Animation是差不多的,属性也是一样的,如By.From.To,不同的是,PointAnimation是目标值从一点到另一个点. 我有理由相信,大家一定懂的,所以,我不多介绍了,给两个例了热一下身就行了. 例一,让直线动起来. 这个例子,以LineGeometry作为动画的目标对象,通过对StartPoint属性和EndPoint属性进行动画来让直线(

Windows Phone开发(37):动画之ColorAnimation

原文:Windows Phone开发(37):动画之ColorAnimation 上一节中我们讨论了用double值进行动画处理,我们知道动画是有很多种的,今天,我向大家继续介绍一个动画类--ColorAnimation. 其实,它和DoubleAnimation也是很像,毕竟所谓动画,无非就是在特定的时间段内,把一个值变为另一个值的一种过度形式.故ColorAnimation就是用于颜色过度动画的.其中,以下几个属性我们只需简单关注一下即可:   1.By:相对于初始值所更改的值的总量.这个属

VS2010 创建单文档MFC,LoadmxFile Arcgis .MXD地图,在单击其他视图后再单击地图所在的视图,鼠标轮滑队地图的缩放就失效了

问题描述 VS2010创建单文档MFC,LoadmxFileArcgis.MXD地图,鼠标的前后轮滑对地图有缩放功能,但是在单击其他视图后再单击地图所在的视图,鼠标轮滑对地图的缩放就失效了这是什么情况? 解决方案

c++-用MFC实现地图导航系统 缩放问题

问题描述 用MFC实现地图导航系统 缩放问题 想用MFC做一个地图导航系统,显示地图的地方要能放大缩小类似百度地图那样,有什么方法吗? 放大缩小后坐标怎么办? 解决方案 先谢谢大家,实在是想不出来了

手把手教你改善界面交互动画

  本文将探究UI设计中动画效果的过度应用,通过对比早期的视觉设计,为UI动画的有效设计提供一些建议,另外附上实战案例,手把手教你改进文中案例的交互动画哟. 遗憾的是,这并非某个做作的反面案例--而是某个近期客户处拿来的实例. 简介 自70-80年代CRT屏幕上映第一幅光栅图形以来,人们对数字视觉设计的态度便不断进化.与其他艺术领域不同,数字设计的潮流始终随可用工具的进化而变化. 我们已经见证了设备显示能力的不断进步--从有限的CGA分辨率 (320 x 200) 到VGA(640 x 480)