Bing Maps Tutorial #2 – Grundlegende Funktionen des Bing Maps Controls für Silverlight

30. March 2010 10:55

Bing Maps wächst derzeit enorm in der Bedeutung. Besonders durch die Integration von Deep Zoom (Silverlight) und PhotoSynth hat Bing Maps starkes Aufsehen erregt. Doch auch für Software Entwickler kann Bing Maps sehr interessant sein. In dieser Tutorial Serie, welche mit “bingmaps tutorial” getagged ist, kann man sich durch sämtliche Posts durchklicken.

Wollen wir das Tutoral mal mit etwas XAML starten. Hierfür brauchen wir eine Art Navigation. Diese lasse ich mal wieder im Office 2007 Stil erscheinen. Hierfür wird lediglich ein StackPanel mit 2 Borders eingefügt. Beide Border bekommen wiederum ein StackPanel verpasst. Im ersten StackPanel wird die Positionierung geschehen, das zweite kümmert sich um die Ansicht (Satelit oder Straße). Dafür sind einige Steuerelemente notwendig, welche im unteren Listing ersichtlich sind.

        <StackPanel Orientation="Horizontal">
            
            <Border CornerRadius="10" Margin="5" Width="200" BorderThickness="1" BorderBrush="Black">
                
                    <StackPanel Margin="10">
                        
                        <TextBox Width="160" Text="48.202" Name="TxtLat" Margin="5,6.5,5,5" TextAlignment="Center"/>
                        <TextBox Width="160" Text="16.369" Name="TxtLon" Margin="5,0,5,5" TextAlignment="Center"/>
                        <Button Margin="8,0,8,5" Content="Go!" Click="OnChangePosition" />
                    </StackPanel>
                
            </Border>
            
            <Border CornerRadius="10" Margin="5" Width="100" BorderThickness="1" BorderBrush="Black">
                
                <StackPanel Margin="10">
                    
                    <Button Content="Satelit"  Margin="5" Click="Button_Click"/>
                    <Button Content="Straßen"  Margin="5" Click="Button_Click"/>
                    
                </StackPanel>
                
            </Border>
            
        </StackPanel>

Nun ist auch noch das Kartensteuerelement notwendig. Im vorigen Post habe ich das schon etwas ausführlicher erklärt.

        <bing:Map Grid.Row="1" CredentialsProvider="{StaticResource BingStorageCred}" 
                  ScaleVisibility="Collapsed" NavigationVisibility="Collapsed" 
                  Center="48.202, 16.369" ZoomLevel="10" Name="BngMap">

            <bing:Map.Mode>
                <bing:AerialMode Labels="True" FadingLabels="True" />
            </bing:Map.Mode>

        </bing:Map>

Nun soll eine andere Position angezeigt werden. Dies kann man einfach durch die Location-Klasse regeln, welche man dem Kartensteuerelement unter “Center” zuweist. Hierfür Parsen wir einfach von den beiden Textboxen und setzen die Longitude und Latidude Eigenschaften.

private void OnChangePosition(object sender, RoutedEventArgs e)
{
    Location loc = new Location();

    try
    {
        loc.Latitude = Double.Parse(TxtLat.Text, new NumberFormatInfo() { CurrencyDecimalSeparator = "." });
        loc.Longitude = Double.Parse(TxtLon.Text, new NumberFormatInfo() { CurrencyDecimalSeparator = "." });
    }
    catch (Exception ex)
    {
        loc.Latitude = 48.202;
        loc.Longitude = 16.369;
    }

    BngMap.Center = loc;
}

Nun ist nur noch ein weiterer Schritt für die unterschiedliche Ansicht notwendig. Hierbei geben wir für beide Buttons ein Event an und überprüfen, ob der Text des Buttons “Satelit” ist. Wenn dem nicht so ist, wird die Straßenkarte angezeigt. Die Einstellung funktioniert hierbei über “Mode”. Dieser kann man jeweils eine “AerialMode” oder eine “RoadMode” zuweisen.

private void Button_Click(object sender, RoutedEventArgs e)
{
    switch (((Button)sender).Content.ToString())
    {
        case "Satelit":
            BngMap.Mode = new AerialMode();
            
            break;
        default:
            BngMap.Mode = new RoadMode();

            break;
    }
}