Windows Phone 7 Silverlight控件之Map的基本控制

  这节讲解Map的基本控制，根据经纬度定位，改变地图的焦距。

效果图

　

　

定位通过经纬度来控制。具体方法是SetView（）；

它有以下几种类型参数

SetView(LocationRect boundingRectangle)；

SetView(GeoCoordinate center, double zoomLevel);

 SetView(GeoCoordinate center, double zoomLevel, double heading);

SetView(GeoCoordinate center, double zoomLevel, double heading, double pitch);

ZoomLevel属性用于控制地图的焦距。

在本例中使用的是第一种参数方法。

1.MapBaseControl.xaml

<phone:PhoneApplicationPage
    xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps" 
    x:Class="WindowsPhoneBingMap.MapBaseControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <my:Map x:Name="myMap" CredentialsProvider="AkGGA_JlwP7XGV8JxIPb8oEWxrInlLMGKpCe7QM4QB5cg4UGNCqUyjqVfC0B2-XC" Mode="Road" CopyrightVisibility="Collapsed"/>
        <Canvas Background="Black" x:Name="locate" Width="300"  Height="320" Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid Background="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock TextAlignment="Center" FontSize="32" Text="输入经纬度定位地图" Grid.Row="0" Grid.ColumnSpan="2"></TextBlock>
                <TextBlock Text="经度:" FontSize="32" Grid.Row="1" Grid.Column="0" TextAlignment="Center" VerticalAlignment="Center"></TextBlock>
                <TextBox x:Name="txtLongitude" Grid.Row="1" Grid.Column="1" Width="220"></TextBox>
                <TextBlock Text="纬度:" FontSize="32" Grid.Row="2" Grid.Column="0" TextAlignment="Center" VerticalAlignment="Center"></TextBlock>
                <TextBox x:Name="txtLatitude" Grid.Row="2" Grid.Column="1"></TextBox>
                <TextBlock Text="焦距:" FontSize="32" Grid.Row="3" Grid.Column="0" TextAlignment="Center" VerticalAlignment="Center"></TextBlock>
                <TextBox x:Name="txtZoomlevel" Grid.Row="3" Grid.Column="1"></TextBox>
                <Button x:Name="btnLocate" Content="定位" Grid.Row="4" Grid.ColumnSpan="2" Width="100" Click="btnLocate_Click"/>
            </Grid>

        </Canvas>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="ok.png" Text="定位" Click="ApplicationBarIconButton_Click"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

　

2.MapBaseControl.cs

  public partial class MapBaseControl : PhoneApplicationPage
    {
        public MapBaseControl()
        {
            InitializeComponent();
        }

        private void ApplicationBarIconButton_Click(object sender, EventArgs e)
        {
            this.locate.Visibility = Visibility.Visible;
        }

        private void btnLocate_Click(object sender, RoutedEventArgs e)
        {
            //纬度
            double latitude = 0;

            //经度
            double longitude = 0;

            //焦距
            double zoomLevel = 1d;

            double.TryParse(txtLatitude.Text, out latitude);

            double.TryParse(txtLongitude.Text, out longitude);

            double.TryParse(txtZoomlevel.Text, out zoomLevel);
            this.myMap.SetView(new LocationRect(new GeoCoordinate(latitude, longitude), 80, 80));
            this.myMap.ZoomLevel = zoomLevel;
            this.locate.Visibility = Visibility.Collapsed;
        }
    }