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

2022-05-21 15:50:04

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

说明

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

结果

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

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

Step1 建专案

Step2 设定应用程式使用Map功能

Step3 画面设计

加入两个按钮控制项一个地图控制项

1. Button控制项，Name->btn1、Content->海生馆

2. Button控制项，Name->btn2、Content->美术馆(动画)

3. Map控制项，Name->map1

产生的XAML程式码如下

<!--ContentPanel - 其他内容置於此-->

        <grid x:name="ContentPanel" 
margin="12,0,12,0" 
grid.row="1"><button x:name="btn1" 
content="海生馆" 
margin="10,10,0,0" 
verticalalignment="Top" 
horizontalalignment="Left"></button><button x:name="btn2" 
content="美术馆(动画)" 
margin="135,10,0,0" 
verticalalignment="Top" 
horizontalalignment="Left">

            <maps:map x:name="map1" 
margin="10,99,0,0" 
verticalalignment="Top" 
horizontalalignment="Left" 
width="436" 
height="587">

         
</maps:map></button></grid>

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;
}