So wird’s gemacht: Anzeigen Ihres Standorts bei Bing Maps (XAML)

Applies to Windows only

In diesem Thema erfahren Sie, wie Sie Ihre Position mit Bing Maps anzeigen und Ihre App anschließend unter Verwendung des Simulators in Microsoft Visual Studio mit unterschiedlichen Positionen testen.

Den vollständigen Quellcode für dieses Thema können Sie hier herunterladen.

Das folgende Video bietet eine kurze Übersicht über die Schritte in diesem Lernprogramm.

Voraussetzungen

Sie sollten mit XAML, Visual C# und Ereignissen vertraut sein.

Der Zugriff auf die Position muss auf dem verwendeten Gerät aktiviert sein.

Anweisungen

Schritt 1: Herunterladen und Installieren des Bing Maps-SDKs für Windows Store-Apps

Laden Sie das Bing Maps-SDK für Windows Store-Apps von der Downloadwebsite herunter.

Schritt 2: Registrieren und Erstellen eines Bing Maps-Schlüssels für die App

Registrieren Sie sich im Bing Maps-Portal als Benutzer, und folgen Sie dann den Anweisungen zum Abrufen eines Bing Maps-Schlüssels für Ihre App. Diesen Schlüssel verwenden wir später, wenn wir das Bing Maps-Steuerelement in unser Projekt einfügen.

Schritt 3: Öffnen von Visual Studio

Öffnen Sie eine Instanz von Visual Studio.

Schritt 4: Erstellen eines neuen Projekts

Erstellen Sie ein neues Projekt, und wählen Sie aus den Projekttypen unter Visual C# > Windows Store den Typ Blank App (XAML) aus. Nennen Sie die App SimpleMapping.

Schritt 5: Festlegen der Zielplattform

Öffnen Sie den Konfigurations-Manager über das Menü Erstellen, und legen Sie die aktive Projektmappenplattform auf x86 oder x64 fest.Festlegen der Plattform im Konfigurations-Manager

Schritt 6: Hinzufügen der Bing Maps-Verweise

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Verweise, und fügen Sie Verweise für Bing Maps für C#, C++ oder Visual Basic und Microsoft Visual C++-Laufzeitpaket hinzu.Hinzufügen von Verweisen im Verweis-Manager

Schritt 7: Festlegen der Positionsfunktion

Öffnen Sie die Datei Package.appxmanifest, und navigieren Sie zur Registerkarte Funktionen. Wählen Sie die Funktion Position aus.Festlegen der Positionsfunktion

Schritt 8: Hinzufügen von Klassen für die Positionsgenauigkeitssymbole (10 Meter und 100 Meter)

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt SimpleMapping, und fügen Sie ein neues Element hinzu. Wählen Sie die Option Benutzersteuerelement aus, und nennen Sie die Seite LocationIcon10m.xaml.
  2. Öffnen Sie LocationIcon10m.xaml, und kopieren Sie den folgenden XML-Code in die Datei. (Ersetzen Sie dabei den ursprünglichen Inhalt). Dieser Code stellt ein Symbol bereit, das angezeigt wird, wenn die Positionsdaten auf etwa 10 Meter genau sind.
    
    <UserControl
        x:Class="SimpleMapping.LocationIcon10m"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:SimpleMapping"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Canvas>
            <Ellipse Height="25" Width="25" Fill="#FFF0F0F0" Margin="-12.5,-12.5,0,0"></Ellipse>
            <Ellipse Height="20" Width="20" Fill="Black" Margin="-10,-10,0,0"></Ellipse>
            <Ellipse Height="10" Width="10" Fill="White" Margin="-5,-5,0,0"></Ellipse>
        </Canvas>
    
    </UserControl>
    
    
    
  3. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt SimpleMapping, und fügen Sie ein neues Element hinzu. Wählen Sie die Option Benutzersteuerelement aus, und nennen Sie die Seite LocationIcon100m.xaml.
  4. Öffnen Sie LocationIcon100m.xaml, und kopieren Sie den folgenden XML-Code in die Datei. (Ersetzen Sie dabei den ursprünglichen Inhalt). Dieser Code stellt ein Symbol bereit, das angezeigt wird, wenn die Positionsdaten auf etwa 100 Meter genau sind. Bei noch ungenaueren Daten erscheint kein Symbol, und auf der Karte wird nur eine Region angezeigt. Weitere Informationen hierzu finden Sie unter Guidelines for location-aware apps im Abschnitt "Richtlinien für die grafische Darstellung des Standorts".
    
    <UserControl
        x:Class="SimpleMapping.LocationIcon100m"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:SimpleMapping"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Canvas>
            <Ellipse Height="55" Width="55" Fill="Black" Opacity=".35" Margin="-27.5,-27.5,0,0"></Ellipse>
            <Ellipse Height="50" Width="50" Fill="CornflowerBlue" Opacity=".65" Margin="-25,-25,0,0"></Ellipse>
            <Ellipse Height="25" Width="25" Fill="#FFF0F0F0" Margin="-12.5,-12.5,0,0"></Ellipse>
            <Ellipse Height="20" Width="20" Fill="Black" Margin="-10,-10,0,0"></Ellipse>
            <Ellipse Height="10" Width="10" Fill="White" Margin="-5,-5,0,0"></Ellipse>
        </Canvas>
    </UserControl>
    
    
    

Schritt 9: Erstellen eines Seitenlayouts zum Anzeigen der Karte

  1. Öffnen Sie die Datei MainPage.xaml, und kopieren Sie den folgenden XML-Code in die Datei. (Ersetzen Sie dabei den ursprünglichen Inhalt.) Dieser XML-Code zeigt eine Schaltfläche zum Abrufen der Position, eine Schaltfläche zum Abbrechen des Vorgangs, sechs Textfelder für die Anzeige der Positionsdaten und -beschriftungen sowie ein Kartensteuerelement zum Anzeigen der Position an.
    
    <Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:SimpleMapping"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Maps="using:Bing.Maps"
        x:Class="SimpleMapping.MainPage"
        mc:Ignorable="d">
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Button x:Name="MapLocationButton" Content="Map Current Location" HorizontalAlignment="Left" Margin="29,31,1157,0" VerticalAlignment="Top" Click="MapLocationButton_Click" Height="38"/>
    
            <Maps:Map x:Name="Map" Margin="0,120,0,0" Credentials="Insert Your Bing Maps Key Here"/>
    
            <Button x:Name="CancelGetLocationButton" Content="Cancel" HorizontalAlignment="Left" Margin="242,31,0,0" VerticalAlignment="Top" Click="CancelGetLocationButton_Click"/>
            <TextBox x:Name="MessageTextbox" HorizontalAlignment="Left" Margin="354,37,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="605" Background="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}"/>
            <TextBox HorizontalAlignment="Left" Margin="1046,10,0,0" TextWrapping="Wrap" Text="Latitude:" VerticalAlignment="Top" Background="{StaticResource ButtonBackgroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}"/>
            <TextBox HorizontalAlignment="Left" Margin="1046,42,0,0" TextWrapping="Wrap" Text="Longitude:" VerticalAlignment="Top" Background="{StaticResource ButtonBackgroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}"/>
            <TextBox HorizontalAlignment="Left" Margin="1046,74,0,0" TextWrapping="Wrap" Text="Accuracy:" VerticalAlignment="Top" Background="{StaticResource ButtonBackgroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}"/>
            <TextBox x:Name="LatitudeTextbox" HorizontalAlignment="Left" Margin="1165,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Background="{StaticResource ButtonBackgroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}"/>
            <TextBox x:Name="LongitudeTextbox" HorizontalAlignment="Left" Margin="1165,42,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Background="{StaticResource ButtonBackgroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}"/>
            <TextBox x:Name="AccuracyTextbox" HorizontalAlignment="Left" Margin="1165,74,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Background="{StaticResource ButtonBackgroundThemeBrush}" BorderBrush="{StaticResource ButtonBackgroundThemeBrush}" Foreground="{StaticResource ButtonForegroundThemeBrush}"/>
    
        </Grid>
    </Page>
    
    
    
  2. Fügen Sie den weiter oben angeforderten Bing Maps-Schlüssel in das Credentials-Attribut des Kartensteuerelements ein.

Layout der Steuerelemente im Designer

Schritt 10: Hinzufügen von Namespaces zum Projekt

Fügen Sie in der Datei MainPage.xaml.cs den folgenden Code hinzu:


using Windows.Devices.Geolocation;
using System.Threading;
using System.Threading.Tasks;
using Bing.Maps;

Schritt 11: Hinzufügen der Membervariablen

Fügen Sie der MainPage-Klasse in MainPage.xaml.cs die folgenden Membervariablen hinzu:


    public sealed partial class MainPage : Page
    {

        // member variables to add
        private Geolocator _geolocator = null;
        private CancellationTokenSource _cts = null;
        LocationIcon10m _locationIcon10m;
        LocationIcon100m _locationIcon100m;

Schritt 12: Initialisieren der Membervariablen

Ersetzen Sie in MainPage.xaml.cs den MainPage-Konstruktor durch den folgenden Code zum Initialisieren der Membervariablen:


        public MainPage()
        {
            this.InitializeComponent();
            _geolocator = new Geolocator();
            _locationIcon10m = new LocationIcon10m();
            _locationIcon100m = new LocationIcon100m();

        }

Schritt 13: Behandeln des OnNavigatedTo-Ereignisses

Ersetzen Sie in MainPage.xaml.cs den OnNavigatedTo-Ereignishandler durch den folgenden Code, um die Zustände der Schaltflächen zum Ermitteln der Position (Get Location) und zum Abbrechen des Vorgangs (Cancel) zu initialisieren:


        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            MapLocationButton.IsEnabled = true;
            CancelGetLocationButton.IsEnabled = false;
        }

Schritt 14: Behandeln des MapLocationButton_Click-Ereignisses

Fügen Sie in MainPage.xaml.cs den MapLocationButton_Click-Ereignishandler hinzu.

Dieser Code bewirkt Folgendes:

  • Er ändert den Zustand der Schaltflächen zum Ermitteln der Position (Get Location) und zum Abbrechen des Vorgangs (Cancel).
  • Er entfernt sämtliche vorherige Positionssymbole, die eventuell verwendet wurden.
  • Er richtet ein Abbruchtoken ein, damit der Benutzer den Vorgang abbrechen kann, wenn er zu lange dauert.
  • Er ruft asynchron die Position ab.
  • Er wählt auf der Grundlage der Genauigkeit der abgerufenen Daten ein passendes Positionssymbol aus.
  • Er legt die Karte auf die Position fest.
  • Er behandelt einige Fehlerzustände.
  • Er setzt nach Abruf der Position die Schaltflächen zurück.

        async private void MapLocationButton_Click(object sender, RoutedEventArgs e)
        {
            // Change the state of our buttons.
            MapLocationButton.IsEnabled = false;
            CancelGetLocationButton.IsEnabled = true;

            // Remove any previous location icon.
            if (Map.Children.Count > 0)
            {
                Map.Children.RemoveAt(0);
            }

            try
            {
                // Get the cancellation token.
                _cts = new CancellationTokenSource();
                CancellationToken token = _cts.Token;

                MessageTextbox.Text = "Waiting for update...";

                // Get the location.
                Geoposition pos = await _geolocator.GetGeopositionAsync().AsTask(token);

                MessageTextbox.Text = "";

                Location location = new Location(pos.Coordinate.Point.Position.Latitude, pos.Coordinate.Point.Position.Longitude);

                // Now set the zoom level of the map based on the accuracy of our location data.
                // Default to IP level accuracy. We only show the region at this level - No icon is displayed.
                double zoomLevel = 13.0f;

                // if we have GPS level accuracy
                if (pos.Coordinate.Accuracy <= 10)
                {
                    // Add the 10m icon and zoom closer.
                    Map.Children.Add(_locationIcon10m);
                    MapLayer.SetPosition(_locationIcon10m, location);
                    zoomLevel = 15.0f;
                }
                // Else if we have Wi-Fi level accuracy.
                else if (pos.Coordinate.Accuracy <= 100)
                {
                    // Add the 100m icon and zoom a little closer.
                    Map.Children.Add(_locationIcon100m);
                    MapLayer.SetPosition(_locationIcon100m, location);
                    zoomLevel = 14.0f;
                }

                // Set the map to the given location and zoom level.
                Map.SetView(location, zoomLevel);

                // Display the location information in the textboxes.
                LatitudeTextbox.Text = pos.Coordinate.Point.Position.Latitude.ToString();
                LongitudeTextbox.Text = pos.Coordinate.Point.Position.Longitude.ToString();
                AccuracyTextbox.Text = pos.Coordinate.Accuracy.ToString();
            }
            catch (System.UnauthorizedAccessException)
            {
                MessageTextbox.Text = "Location disabled.";

                LatitudeTextbox.Text = "No data";
                LongitudeTextbox.Text = "No data";
                AccuracyTextbox.Text = "No data";
            }
            catch (TaskCanceledException)
            {
                MessageTextbox.Text = "Operation canceled.";
            }
            finally
            {
                _cts = null;
            }

            // Reset the buttons.
            MapLocationButton.IsEnabled = true;
            CancelGetLocationButton.IsEnabled = false;
        }


Schritt 15: Behandeln des CancelGetLocationButton_Click-Ereignisses

Fügen Sie in MainPage.xaml.cs den CancelGetLocationButton_Click-Ereignishandler hinzu. Dieser Code bricht den asynchronen Aufruf zum Abrufen der Position ab, wenn der Benutzer auf die Schaltfläche zum Abbrechen (Cancel) klickt. Darüber hinaus setzt er den Zustand der Schaltflächen zurück.


        private void CancelGetLocationButton_Click(object sender, RoutedEventArgs e)
        {
            if (_cts != null)
            {
                _cts.Cancel();
                _cts = null;
            }

            MapLocationButton.IsEnabled = true;
            CancelGetLocationButton.IsEnabled = false;
        }

Schritt 16: Behandeln des OnNavigatingFrom-Ereignisses

Fügen Sie in MainPage.xaml.cs den OnNavigatingFrom-Ereignishandler hinzu. Dieser Code bricht den asynchronen Aufruf zum Abrufen der Position ab, wenn der Benutzer die Seite verlässt.


        protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
        {
            if (_cts != null)
            {
                _cts.Cancel();
                _cts = null;
            }

            base.OnNavigatingFrom(e);
        }

Schritt 17: Erstellen der App

Klicken Sie auf Erstellen > Projektmappe erstellen, um das Projekt zu erstellen.

Schritt 18: Testen der App

  1. Klicken Sie im Menü Debuggen auf Debugging starten, um die Projektmappe zu testen.
  2. Wenn Sie das Beispiel zum ersten Mal ausführen, werden Sie gefragt, ob die App Ihre Position verwenden darf. Wählen Sie die Option Zulassen aus.
  3. Klicken Sie auf die Schaltfläche Get Location, um die aktuelle Position abzurufen.

Hinweis  Wenn keine Positionsdaten angezeigt werden, überprüfen Sie Folgendes:

  • Vergewissern Sie sich, dass der Zugriff auf die Positionsfunktion aktiviert ist. Öffnen Sie package.appxmanifest im Projektmappen-Explorer, und überprüfen Sie auf der Registerkarte Funktionen die Option Position.
  • Falls die Positionsdienste von einem Administrator deaktiviert wurden, hat Ihre App keinen Zugriff auf die Position des Benutzers. Öffnen Sie in der Systemsteuerung den Bereich Standorteinstellungen ändern, und überprüfen Sie, ob Plattform für Windows-Position aktivieren aktiviert ist.

Schritt 19: Testen der App im Simulator

Ändern Sie das Zielgerät in Visual Studio von Lokaler Computer in Simulator, um die App mit verschiedenen Positionen zu testen.

Festlegen des Zielgeräts auf den Simulator

Klicken Sie erneut auf Debuggen starten, um den Simulator mit der darin ausgeführten App zu starten. Klicken Sie im Simulator auf das Globussymbol, um verschiedene Positionen und Genauigkeiten zu testen.

Die im Simulator ausgeführte App

Verwandte Themen

Geolocation-Beispiel
Windows.Devices.Geolocation
Bing Maps-SDK für Windows Store-Apps
Bing Maps-Portal
Abrufen eines Bing Maps-Schlüssels
Richtlinien für die Verwendung von sensiblen Geräten
Roadmap für das Erstellen von Apps mit C#, C++ oder VB

 

 

Anzeigen:
© 2014 Microsoft