---

Aprile 2017

Volume 32 Numero 4

Il presente articolo è stato tradotto automaticamente.

Applicazioni moderne - Analisi del controllo mappa

Da Frank La La

Le mappe sono davvero una delle caratteristiche di dispositivi mobili. Con uno smartphone in mano, è possibile passare strada all'interno di una città di nuovo in modo accurato, trovare tutti i punti eccezionali mangiare, ottenere gli aggiornamenti in tempo reale per le condizioni di traffico, trovare anche una nuova route, ovvero se è disponibile una più veloce. Visualizzare i punti dati o fornire una rapida ricerca dei servizi locali, mapping consente inoltre agli utenti.

Mappe veramente hanno modificato il modo gli utenti interagiscono con i propri dispositivi e il mondo. Fortunatamente, la piattaforma di Windows universale (UWP) è dotato di un controllo mappa completamente funzionale che sfrutta la potenza e immagini di servizi di mappatura di Bing. In articolo questo, verrà controllo mappa di esplorare e visualizzare quanto è facile aggiungere alle applicazioni.

Impostazione del progetto

Creare un nuovo progetto UWP vuota in Visual Studio scegliendo Nuovo progetto dal menu File. Espandere i modelli installati | Windows | Applicazione vuota (Windows Universal). Denominare il progetto MapControl e quindi fare clic su OK. Immediatamente dopo, una finestra di dialogo verrà visualizzato chiesto quale versione di Windows deve essere destinata l'applicazione. Per questo progetto, le opzioni predefinite saranno corrette, pertanto è sufficiente fare clic su OK.

Aprire il file MainPage. XAML e aggiungere la dichiarazione dello spazio dei nomi seguente al tag di pagina:

xmlns:maps="using:Windows.UI.Xaml.Controls.Maps"

In questo modo, gli elementi che si trova nello spazio dei nomi Windows.UI.Xaml.Controls.Maps indirizzabile per gli elementi XAML nel controllo pagina utilizzando le mappe: prefisso. Per una spiegazione dettagliata di spazi dei nomi XAML e Mapping Namespace, Centro sviluppatori Windows dispone di un articolo approfondito in merito a bit.ly/2jwcO2D.

Aggiunta del controllo mappa

Per aggiungere una mappa a questa applicazione, è sufficiente aggiungere il codice XAML seguente:

<maps:MapControl x:Name="mapControl" >
  </maps:MapControl>

Eseguire la soluzione premendo F5 o scegliendo Avvia debug dal menu Debug. L'applicazione dovrebbe essere simile figura 1. Si noti che è possibile fare clic e trascinare la mappa per spostarsi al suo interno. Fare doppio clic su eseguirà lo zoom in un punto. Inoltre, i movimenti tocco modificare anche il controllo mappa. Si noterà inoltre rosso nell'angolo inferiore sinistro della finestra di controllo conferma, "avviso: MapServiceToken non specificato."

Controllo mappa di base nella figura 1

Il controllo mappa utilizza immagini e altri servizi, ad esempio dati di traffico, da Bing mappe. Di conseguenza, il team di Bing desidera avere la possibilità di controllare l'utilizzo di unità quale account. Ciò consente di limitare l'uso improprio e mantenere bassi i costi per tutti gli utenti. Per rimuovere il messaggio di avviso, è necessario ottenere un MapServiceToken dal centro per sviluppatori di Bing Maps. Nella maggior parte dei casi, sull'utilizzo dei servizi Bing Maps sono gratuito. Per informazioni sui prezzi, consultare la tabella dei prezzi per le chiavi di base e dell'organizzazione in microsoft.com/maps/create-a-bing-maps-key.aspx. 

La registrazione per un Token di servizio di Bing Maps

In un browser, passare a bingmapsportal.com, fare clic su Accedi e usare le credenziali dell'account Microsoft per l'accesso. Nella pagina di destinazione, fare clic sul menu account e scegliere chiavi personale, come illustrato nella figura 2.

Figura 2, l'accesso a mio chiavi nel centro per sviluppatori di Bing Maps

Se hai effettuato la registrazione di chiavi con Bing Maps prima, quindi vengono visualizzati in un elenco, come illustrato nella figura 3. Per creare una nuova chiave, fare clic sull'opzione che indica "Fare clic qui per creare una nuova chiave."

Figura 3. la pagina di chiavi con elenco di chiavi registrate in precedenza

Verrà visualizzato un form in cui viene chiesto per informazioni sull'applicazione per cui verrà creata la chiave (vedere figura 4). Nome dell'applicazione, scegliere Basic per tipo di chiave e App di Windows universale per tipo di applicazione. L'URL dell'applicazione è facoltativo. Fare clic su Crea e verrà visualizzato con una nuova chiave. Copiare e ripristinare il file MainPage. Xaml. Modificare il codice XAML per aggiungere l'attributo MapServiceToken e incollarvi la chiave come valore, come illustrato di seguito:

<maps:MapControl x:Name="mapControl" MapServiceToken="{Insert Key Here}" >
  </maps:MapControl>

Figura 4 creare chiave

Eseguire nuovamente la soluzione e il messaggio di avviso non è più presente.

Controllare la mappa con codice

Come può notare, l'aggiunta di un controllo mappa a una piattaforma UWP app è piuttosto semplice. Il controllo viene fornito anche con la possibilità per gli utenti di modificare il centro del punto di livello e zoom con il mouse o touch. La mappa sarebbe più utile se può essere modificato nel codice. Ad esempio, è opportuno modificare lo stile della mappa, in modo che sia possibile visualizzare dati terreno o immagini aeree e non solo la strada visualizzazione predefinita figura 1.

Modifica degli stili di mappa

Il controllo mappa dispone di una proprietà di stile del tipo MapStyle, che costituisce un'enumerazione. Per modificare la mappa per visualizzare immagini aeree con strade sovrapposte su di essi, ad esempio, tutto ciò che serve è la seguente riga di codice:

mapControl.Style = MapStyle.AerialWithRoads;

Per implementare la possibilità di scegliere qualsiasi MapStyle disponibile, l'applicazione dovrà essere altri controlli. Aggiungere le seguenti definizioni di griglia alla griglia nel controllo pagina nel file MainPage. XAML per creare uno spazio per i controlli che si intende aggiungere:

<Grid.RowDefinitions>
  <RowDefinition Height="50*"/>
  <RowDefinition Height="50*"/>
  <RowDefinition Height="577*"/>
</Grid.RowDefinitions>

Successivamente, aggiungere l'attributo Grid. Row al controllo mappa e impostarne il valore su 2.

A questo punto, aggiungere i seguenti controlli pulsante in un elemento StackPanel:

<StackPanel Orientation="Horizontal" Grid.Row="0">
  <Button Content="Roads" Click="Button_Click" Margin="3" />
  <Button Content="Aerial" Click="Button_Click" Margin="3" />
  <Button Content="Aerial With Roads" Click="Button_Click" Margin="3"/>
  <Button Content="Terrain" Click="Button_Click" Margin="3" />
  <Button Content="3D Aerial" Click="Button_Click" Margin="3" />
  <Button Content="3D Aerial With Roads" Click="Button_Click" Margin="3"/>
</StackPanel>

Nel file MainPage.xaml.cs aggiungere il codice del gestore eventi in figura 5 per determinare quale pulsante è stato selezionato e quindi impostare il mapping allo stile appropriato.

Figura 5 codice del gestore eventi

private void Button_Click(object sender, RoutedEventArgs e)
  {
    var senderButton = sender as Button;
    var buttonTest = senderButton.Content.ToString();
    switch (buttonTest)
    {
      case "Aerial":
      mapControl.Style = MapStyle.Aerial;
      break;
    case "Aerial With Roads":
    mapControl.Style = MapStyle.AerialWithRoads;
    break;
    case "Terrain":
      mapControl.Style = MapStyle.Terrain;
      break;
    case "3D Aerial":
      mapControl.Style = MapStyle.Aerial3D;
      break;
    case "3D Aerial With Roads":
      mapControl.Style = MapStyle.Aerial3DWithRoads;
      break;
    default:
    mapControl.Style = MapStyle.Road;
    break;
  }
}

Eseguire l'app ed esplorare la mappa utilizzando i diversi stili disponibili. Si noti inoltre che quando si utilizza una delle visualizzazioni 3D in cui il controllo, ancora una volta, gestisce tutte le funzioni di mouse e touch automaticamente.

Lo zoom avanti e indietro

Per impostazione predefinita, la mappa verrà essere completamente ridotta, fornendo una visualizzazione della terra intera. Che potrebbe non essere utile per molti scopi. Verrà visualizzata la mappa di controllo dispone di una proprietà di tipo che double denominata ZoomLevel per impostare la distanza in ingrandita o ridotta la mappa. Il valore varia da 1 a 20, con 1 viene ingrandita fino e 20 con il mondo intero. I valori di fuori di questo intervallo vengono ignorati.

Aggiungere lo zoom avanti e zoom indietro per l'applicazione è piuttosto semplice. In primo luogo, aggiungere i seguenti elementi XAML per il file MainPage. XAML all'interno del controllo griglia:

<StackPanel Orientation="Horizontal" Grid.Row="1">
  <Button x:Name="btnZoomIn" Content="Zoom In" Click="btnZoomIn_Click"
    Margin="3" />
  <Button x:Name="btnZoomOut" Content="Zoom Out" Click="btnZoomOut_Click"
    Margin="3" />
</StackPanel>

Successivamente, aggiungere le seguenti due gestori eventi per i due pulsanti:

private void btnZoomIn_Click(object sender, RoutedEventArgs e)
{
  mapControl.ZoomLevel = mapControl.ZoomLevel + 1;
}
private void btnZoomOut_Click(object sender, RoutedEventArgs e)
{
  mapControl.ZoomLevel = mapControl.ZoomLevel - 1;
}

Inserimento di marcatori nelle mappe

Un'altra utile funzionalità del software di mapping è la possibilità di posizionare i marcatori in vari punti di interesse. Potrebbe trattarsi di un ottimo modo per sottolineare attrazioni locale. Il controllo mappa semplifica questa attività, nonché. Per questo esempio, inserire un marcatore nel monumento Washington in Washington D.C. Le coordinate geospatial del monumento Washington sono 38.8895 settentrionale e occidentale 77.0353. A tale scopo, aggiungere il codice seguente nel file MainPage.xaml.cs:

private void LoadMapMarkers()
{
  MapIcon landmarkMapIcon = new MapIcon();
  landmarkMapIcon.Location = new Geopoint(
    new BasicGeoposition() { Latitude = 38.8895, Longitude = -77.0353 } );
  landmarkMapIcon.Title = "Washington Monument";
  mapControl.MapElements.Add(landmarkMapIcon);
}

Quindi, chiamare la funzione dal metodo del costruttore MainPage.

Eseguire l'app e verrà visualizzato un marcatore è stato inserito nella mappa di Washington, esattamente dove si trova il monumento Washington.

Latitudine e longitudine

Tutti i punti in terra possono essere rappresentati da un sistema di coordinate che consente di misurare la distanza angolare tra equatore e meridiano Greenwich, in Inghilterra. Le misure di latitudine in gradi Nord e Sud in gradi, compreso tra -90 al polo sud 90 al Polo Nord. Misure di gradi di longitudine est o occidentale in gradi tra -180 e 180.

Visualizzazione dei dati di traffico

Bing tiene traccia dei dati del flusso di traffico da città del mondo e il controllo mappa è possibile sovrapporre questi dati in una mappa in modo molto semplice. Per aggiungere questa funzionalità per l'applicazione, aggiungere il markup seguente nel file MainPage. xaml subito dopo il pulsante Zoom indietro:

<CheckBox Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"
  Margin="3">Show Traffic</CheckBox>

Quindi aggiungere i gestori di eventi seguente per il file MainPage.xaml.cs:

private void CheckBox_Checked(object sender, RoutedEventArgs e)
{
  mapControl.TrafficFlowVisible = true;
}
private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
{
  mapControl.TrafficFlowVisible = false;
}

Eseguire l'applicazione, selezionare la casella di controllo Mostra il traffico e zoom in qualsiasi città principali. Il traffico dati verranno visualizzati solo quando il livello di zoom è 8 o versione successiva.

GeoLocation

L'applicazione dispone di diversi controlli di modifica dello stile della mappa, ingrandire o ridurre e visualizzare anche i dati del flusso di traffico. Può essere utile per il controllo mappa inizializzare vicino alla posizione dell'utente corrente. In questo modo, gli utenti possono ottenere rapidamente una vista della loro circostante, nonché le condizioni di traffico nelle vicinanze. A tale scopo, è necessario abilitare la funzionalità di percorso nel file package. appxmanifest, come illustrato nella figura 6. In Visual Studio, fare doppio clic sul file package. appxmanifest nel riquadro Esplora soluzioni. Nell'editor, assicurarsi che sia selezionata la casella di controllo accanto a percorso. Salvare il file. A questo punto, l'applicazione è in grado di percorso.

Figura 6 abilitazione della funzionalità di percorso per l'App

Nel file MainPage. XAML aggiungere il seguente controllo Button:

<Button x:Name="btnCurrentLocation" Content="Current Location"
  Click="btnCurrentLocation_Click" Margin="3"/>

E aggiungere il seguente gestore eventi nel file MainPage.xaml.cs:

private async void btnCurrentLocation_Click(object sender, RoutedEventArgs e)
{
  var locationAccessStatus = await Geolocator.RequestAccessAsync();
  if (locationAccessStatus == GeolocationAccessStatus.Allowed)
  {
    Geolocator geolocator = new Geolocator();
    Geoposition currentPosition = await geolocator.GetGeopositionAsync();
    mapControl.Center = new Geopoint(new BasicGeoposition()
    {
      Latitude = currentPosition.Coordinate.Latitude,
      Longitude = currentPosition.Coordinate.Longitude
    });
    mapControl.ZoomLevel = 12;
  }
}

Il metodo btnCurrentLocation_Click esegue prima una query di oggetto GeoLocator per ciò che ha lo stato di accesso dell'applicazione a esso. Dopo la prima volta l'app viene eseguita nel sistema dell'utente, il sistema verrà visualizzata una finestra di dialogo simile a quella mostrata nella figura 7. Se l'utente fa clic su Sì, il codice ottiene la posizione corrente dal Geolocator. Il codice in seguito, Allinea al centro la mappa in latitudine e longitudine forniti. Se la funzionalità di percorso è stato aggiunto, l'utente non ancora richiesta la finestra di dialogo.

Figura 7 chiedere all'utente l'autorizzazione per accedere alle informazioni di posizione precisa

Eseguire l'app, fare clic sul pulsante posizione corrente, fare clic su Sì quando richiesto. Verrà visualizzato lo stato attivo della mappa in, molto accanto o, la posizione corrente. Accuratezza dipenderà da numerosi fattori. Se il dispositivo è connesso a un ricevitore GPS, allora l'accuratezza sarà molto elevato, probabilmente fino a circa 10 metri. Se il dispositivo non dispone di un ricevitore GPS, la GeoLocator si basa su altri mezzi per determinare posizione, ad esempio tramite Wi-Fi. Per ulteriori informazioni sul funzionamento di posizionamento Wi-Fi, fare riferimento alla voce di Wikipedia nel en.wikipedia.org/wiki/Wi-Fi_positioning_system. Se Wi-Fi non è disponibile, il GeoLocator utilizzerà l'indirizzo IP del dispositivo client per determinare posizione, in cui le connessioni VPN e altri fattori possono ridurre significativamente la precisione.

Conclusioni

Le mappe sono davvero una delle funzionalità più importanti dei dispositivi mobili. Molte applicazioni possono trarre vantaggio dall'aggiunta di un controllo mappa per visualizzare i dati o assistere gli utenti nella ricerca nelle vicinanze di servizi. In questo articolo, si è visto quanto è facile aggiungere una mappa per l'applicazione e che, nella maggior parte dei casi, accesso ai servizi di mapping viene fornito senza alcun costo per l'utente, lo sviluppatore.

---

Frank La Vigneè un consulente indipendente, dove aiuta i clienti utilizzano la tecnologia per creare una community migliorata. Possiede un blog all'indirizzo FranksWorld.com e ha un YouTube canale TV al mondo chiamato Marco (FranksWorld.TV).

Grazie a seguenti esperti tecnici per la revisione dell'articolo: Rachel Appel

---

Viene illustrato in questo articolo nel forum di MSDN Magazine