Kaarten weergeven met 2D-, 3D- en Streetside-weergaven
Belangrijk
Buitengebruikstelling van de service Bing Maps for Enterprise
De UWP-MapControl en kaartservices van de Windows.Services.Maps naamruimte zijn afhankelijk van Bing Kaarten. Bing Kaarten voor Ondernemingen is afgeschaft en wordt buiten gebruik gesteld. Op dat moment ontvangen de MapControl- en services geen gegevens meer.
Voor meer informatie, zie het Bing Maps Developer Center en de Bing Maps-documentatie. U kunt een kaart weergeven in een licht wegklikbaar venster, een kaart plaatskaart of in een volledig uitgeruste kaartfunctie.
Download het kaartvoorbeeld om enkele functies uit te proberen die in deze handleiding worden beschreven.
Kaart weergeven in een plaatskaart
U kunt gebruikers een kaart weergeven in een licht pop-upvenster hierboven, onder of aan de zijkant van een UI-element of een gebied van een app waar de gebruiker zich bevindt. De kaart kan een plaats of adres weergeven dat betrekking heeft op informatie in uw app.
Deze placecard toont de stad Seattle.
Hier volgt de code waarmee Seattle wordt weergegeven op een plaatskaart onder een knop.
private void Seattle_Click(object sender, RoutedEventArgs e)
{
Geopoint seattlePoint = new Geopoint
(new BasicGeoposition { Latitude = 47.6062, Longitude = -122.3321 });
PlaceInfo spaceNeedlePlace = PlaceInfo.Create(seattlePoint);
FrameworkElement targetElement = (FrameworkElement)sender;
GeneralTransform generalTransform =
targetElement.TransformToVisual((FrameworkElement)targetElement.Parent);
Rect rectangle = generalTransform.TransformBounds(new Rect(new Point
(targetElement.Margin.Left, targetElement.Margin.Top), targetElement.RenderSize));
spaceNeedlePlace.Show(rectangle, Windows.UI.Popups.Placement.Below);
}
Deze placecard toont de locatie van de Space Needle in Seattle.
Hier volgt de code waarmee de Space Needle wordt weergegeven op een plaatskaart onder een knop.
private void SpaceNeedle_Click(object sender, RoutedEventArgs e)
{
Geopoint spaceNeedlePoint = new Geopoint
(new BasicGeoposition { Latitude = 47.6205, Longitude = -122.3493 });
PlaceInfoCreateOptions options = new PlaceInfoCreateOptions();
options.DisplayAddress = "400 Broad St, Seattle, WA 98109";
options.DisplayName = "Seattle Space Needle";
PlaceInfo spaceNeedlePlace = PlaceInfo.Create(spaceNeedlePoint, options);
FrameworkElement targetElement = (FrameworkElement)sender;
GeneralTransform generalTransform =
targetElement.TransformToVisual((FrameworkElement)targetElement.Parent);
Rect rectangle = generalTransform.TransformBounds(new Rect(new Point
(targetElement.Margin.Left, targetElement.Margin.Top), targetElement.RenderSize));
spaceNeedlePlace.Show(rectangle, Windows.UI.Popups.Placement.Below);
}
Kaart weergeven in een controle
Gebruik een kaartbeheer om uitgebreide en aanpasbare kaartgegevens in uw app weer te geven. Een kaartbesturing kan wegenkaarten, luchtfoto's, 3D, weergaven, routebeschrijvingen, zoekresultaten en verkeer weergeven. Op een kaart kunt u de locatie, routebeschrijvingen en nuttige plaatsen van de gebruiker weergeven. Een kaart kan ook luchtfoto 3D-weergaven, Streetside-weergaven, verkeer, transit en lokale bedrijven weergeven.
Gebruik een kaartbesturingselement als u een kaart in uw app wilt waarmee gebruikers app-specifieke of algemene geografische informatie kunnen bekijken. Als u een kaartbeheer in uw app hebt, hoeven gebruikers niet buiten uw app te gaan om die informatie op te halen.
Notitie
Als u het niet erg vindt dat gebruikers buiten uw app gaan, kunt u overwegen de Windows Maps-app te gebruiken om die informatie op te geven. Uw app kan de Windows Maps-app starten om specifieke kaarten, routebeschrijvingen en zoekresultaten weer te geven. Zie De Windows Maps-app startenvoor meer informatie.
Een kaartbeheer toevoegen aan uw app
Een kaart weergeven op een XAML-pagina door een MapControl-toe te voegen. Als u de MapControl-wilt gebruiken, moet u de Windows.UI.Xaml.Controls.Maps naamruimte op de XAML-pagina of in uw code declareren. Als u het besturingselement vanuit de Toolbox sleept, wordt deze naamruimtedeclaratie automatisch toegevoegd. Als u de MapControl handmatig toevoegt aan de XAML-pagina, moet u de naamruimtedeclaratie handmatig boven aan de pagina toevoegen.
In het volgende voorbeeld ziet u een eenvoudig kaartbesturingselement en configureert u de kaart om de besturingselementen voor zoomen en kantelen weer te geven naast het accepteren van aanraakinvoer.
<Page
x:Class="MapsAndLocation1.DisplayMaps"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MapsAndLocation1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
mc:Ignorable="d">
<Grid x:Name="pageGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Maps:MapControl
x:Name="MapControl1"
ZoomInteractionMode="GestureAndControl"
TiltInteractionMode="GestureAndControl"
MapServiceToken="EnterYourAuthenticationKeyHere"/>
</Grid>
</Page>
Als u het kaartbeheer in uw code toevoegt, moet u de naamruimte handmatig boven aan het codebestand declareren.
using Windows.UI.Xaml.Controls.Maps;
...
// Add the MapControl and the specify maps authentication key.
MapControl MapControl2 = new MapControl();
MapControl2.ZoomInteractionMode = MapInteractionMode.GestureAndControl;
MapControl2.TiltInteractionMode = MapInteractionMode.GestureAndControl;
MapControl2.MapServiceToken = "EnterYourAuthenticationKeyHere";
pageGrid.Children.Add(MapControl2);
Een verificatiesleutel voor kaarten ophalen en instellen
Voordat u MapControl en kaartservices kunt gebruiken, moet u de kaartenverificatiesleutel opgeven als de waarde van de eigenschap MapServiceToken. Vervang in de vorige voorbeelden EnterYourAuthenticationKeyHere door de sleutel die u krijgt uit het Bing Maps Developer Center. De tekst Waarschuwing: MapServiceToken niet opgegeven blijft onder de bediening verschijnen totdat u de kaartverificatiesleutel opgeeft. Zie Een kaartverificatiesleutel aanvragenvoor meer informatie over het ophalen en instellen van een verificatiesleutel voor kaarten.
De locatie van een kaart instellen
Wijs de kaart aan op elke gewenste locatie of gebruik de huidige locatie van de gebruiker.
Een beginlocatie voor de kaart instellen
Stel de locatie in die op de kaart moet worden weergegeven door de eigenschap Center van de MapControl- in uw code op te geven of door de eigenschap in uw XAML-markering te binden. In het volgende voorbeeld ziet u een kaart met de stad Seattle als centrum.
Notitie
Omdat een tekenreeks niet kan worden geconverteerd naar een Geopoint, kunt u in XAML-markup geen waarde opgeven voor de eigenschap Center, tenzij u data binding gebruikt. (Deze beperking geldt ook voor de MapControl.Location gekoppelde eigenschap.)
protected override void OnNavigatedTo(NavigationEventArgs e)
{
// Specify a known location.
BasicGeoposition cityPosition = new BasicGeoposition() { Latitude = 47.604, Longitude = -122.329 };
Geopoint cityCenter = new Geopoint(cityPosition);
// Set the map location.
MapControl1.Center = cityCenter;
MapControl1.ZoomLevel = 12;
MapControl1.LandmarksVisible = true;
}
De huidige locatie van de kaart instellen
Voordat uw app toegang heeft tot de locatie van de gebruiker, moet uw app de RequestAccessAsync-methode aanroepen. Op dat moment moet uw app zich op de voorgrond bevinden en RequestAccessAsync- moeten worden aangeroepen vanuit de ui-thread. Totdat de gebruiker uw app toestemming verleent voor zijn of haar locatie, heeft uw app geen toegang tot locatiegegevens.
Haal de huidige locatie van het apparaat (indien beschikbaar) op met behulp van de methode GetGeopositionAsync van de Geolocator-klasse. Om de bijbehorende Geopunt-te verkrijgen, gebruik je de eigenschap Punt- van de geocoördinaat van de geopositie. Zie Huidige locatie ophalenvoor meer informatie.
// Set your current location.
var accessStatus = await Geolocator.RequestAccessAsync();
switch (accessStatus)
{
case GeolocationAccessStatus.Allowed:
// Get the current location.
Geolocator geolocator = new Geolocator();
Geoposition pos = await geolocator.GetGeopositionAsync();
Geopoint myLocation = pos.Coordinate.Point;
// Set the map location.
MapControl1.Center = myLocation;
MapControl1.ZoomLevel = 12;
MapControl1.LandmarksVisible = true;
break;
case GeolocationAccessStatus.Denied:
// Handle the case if access to location is denied.
break;
case GeolocationAccessStatus.Unspecified:
// Handle the case if an unspecified error occurs.
break;
}
Wanneer u de locatie van uw apparaat op een kaart weergeeft, kunt u afbeeldingen weergeven en het zoomniveau instellen op basis van de nauwkeurigheid van de locatiegegevens. Zie Richtlijnen voor locatiebewuste appsvoor meer informatie.
De locatie van de kaart wijzigen
Als u de locatie wilt wijzigen die wordt weergegeven in een 2D-kaart, roept u een van de overbelastingen aan van de methode TrySetViewAsync. Gebruik deze methode om nieuwe waarden op te geven voor Center, ZoomLevel, Headingen Pitch. U kunt ook een optionele animatie opgeven die moet worden gebruikt wanneer de weergave verandert door een constante op te geven uit de opsomming MapAnimationKind.
Als u de locatie van een 3D-kaart wilt wijzigen, gebruikt u in plaats daarvan de methode TrySetSceneAsync. Zie Luchtfoto 3D-weergaven weergevenvoor meer informatie.
Roep de methode TrySetViewBoundsAsync aan om de inhoud van een GeoboundingBox weer te geven op de kaart. Gebruik deze methode bijvoorbeeld om een route of een deel van een route op de kaart weer te geven. Voor meer informatie, zie Routes en routebeschrijvingen weergeven op een kaart.
Het uiterlijk van een kaart wijzigen
Als u het uiterlijk van de kaart wilt aanpassen, stelt u de eigenschap StyleSheet van het kaartbesturingselement in op een van de bestaande MapStyleSheet--objecten.
myMap.StyleSheet = MapStyleSheet.RoadDark();
U kunt JSON ook gebruiken om aangepaste stijlen te definiëren en die JSON vervolgens te gebruiken om een MapStyleSheet--object te maken.
JSON voor stijlbladen kan interactief worden gemaakt met behulp van de Kaartopmaakblad Editor applicatie.
myMap.StyleSheet = MapStyleSheet.ParseFromJson(@"
{
""version"": ""1.0"",
""settings"": {
""landColor"": ""#FFFFFF"",
""spaceColor"": ""#000000""
},
""elements"": {
""mapElement"": {
""labelColor"": ""#000000"",
""labelOutlineColor"": ""#FFFFFF""
},
""water"": {
""fillColor"": ""#DDDDDD""
},
""area"": {
""fillColor"": ""#EEEEEE""
},
""political"": {
""borderStrokeColor"": ""#CCCCCC"",
""borderOutlineColor"": ""#00000000""
}
}
}
");
Zie voor de volledige JSON-vermelding verwijzing naar de stijlgids voor kaarten.
U kunt beginnen met een bestaand blad en vervolgens JSON gebruiken om alle gewenste elementen te overschrijven. Dit voorbeeld begint met een bestaande stijl en gebruikt JSON om alleen de kleur van watergebieden te wijzigen.
MapStyleSheet \customSheet = MapStyleSheet.ParseFromJson(@"
{
""version"": ""1.0"",
""elements"": {
""water"": {
""fillColor"": ""#DDDDDD""
}
}
}
");
MapStyleSheet builtInSheet = MapStyleSheet.RoadDark();
myMap.StyleSheet = MapStyleSheet.Combine(new List<MapStyleSheet> { builtInSheet, customSheet });
Notitie
Stijlen die u in het tweede opmaakmodel definieert, overschrijven de stijlen in de eerste.
Oriëntatie en perspectief instellen
Inzoomen, uitzoomen, draaien en kantelen van de camera van de kaart om precies de juiste hoek te krijgen voor het gewenste effect. Probeer deze eigenschappen.
- Stel het center van de kaart in op een geografisch punt door de eigenschap Center in te stellen.
- Stel het zoomniveau in van de kaart door de eigenschap ZoomLevel in te stellen op een waarde tussen 1 en 20.
- Stel de draaiing van de kaart in door de eigenschap Kop in te stellen, waarbij 0 of 360 graden = Noord, 90 = Oost, 180 = Zuid en 270 = West.
- Stel de kanteling van de kaart in door de eigenschap DesiredPitch in te stellen op een waarde tussen 0 en 65 graden.
Kaartfuncties weergeven en verbergen
Kaartfuncties zoals wegen en oriëntatiepunten weergeven of verbergen door de waarden van de volgende eigenschappen van de MapControl-in te stellen.
Geef gebouwen en oriëntatiepunten op de kaart weer door de eigenschap LandmarksVisible in of uit te schakelen.
Notitie
U kunt gebouwen weergeven of verbergen, maar u kunt niet voorkomen dat ze drie dimensies weergeven.
Geef voetgangersfuncties weer zoals openbare trappen op de kaart door de eigenschap PedestrianFeaturesVisible in of uit te schakelen.
Geef verkeer op de kaart weer door de eigenschap TrafficFlowVisible in of uit te schakelen.
Geef op of het watermerk op de kaart wordt weergegeven door de eigenschap WatermarkMode in te stellen op een van de MapWatermarkMode constanten.
Een rij- of wandelroute op de kaart weergeven door een MapRouteView toe te voegen aan de Route- verzameling van de kaartcontrole. Zie Routes en routebeschrijvingen weergeven op een kaartvoor meer informatie en een voorbeeld.
Voor informatie over het weergeven van punaises, vormen en XAML-besturingselementen in de MapControl, zie Nuttige plaatsen weergeven op een kaart.
Streetside-weergaven weergeven
Een Streetside-weergave is een perspectief op straatniveau van een locatie die boven op het kaartbesturingselement wordt weergegeven.
Houd rekening met de ervaring 'binnen' de Streetside-weergave, gescheiden van de kaart die oorspronkelijk in het kaartbeheer wordt weergegeven. Als u bijvoorbeeld de locatie wijzigt in de Streetside-weergave, wordt de locatie of weergave van de kaart 'onder' de Streetside-weergave niet gewijzigd. Nadat u de Streetside-weergave hebt gesloten (door op de X in de rechterbovenhoek van het besturingselement te klikken), blijft de oorspronkelijke kaart ongewijzigd.
Een Streetside-weergave weergeven
- Bepaal of Streetside-weergaven op het apparaat worden ondersteund door IsStreetsideSupportedte controleren.
- Als de Streetside-weergave wordt ondersteund, maakt u een StreetsidePanorama in de buurt van de opgegeven locatie door FindNearbyAsync-aan te roepen.
- Bepaal of er een panorama in de buurt is gevonden door te controleren of de StreetsidePanorama niet null is.
- Als er een panorama in de buurt is gevonden, maakt u een StreetsideExperience- voor de eigenschap CustomExperience van het kaartbesturingselement.
In dit voorbeeld ziet u hoe u een Streetside-weergave weergeeft die vergelijkbaar is met de vorige afbeelding.
Notitie
De overzichtskaart wordt niet weergegeven als de kaartbediening te klein is.
private async void showStreetsideView()
{
// Check if Streetside is supported.
if (MapControl1.IsStreetsideSupported)
{
// Find a panorama near Avenue Gustave Eiffel.
BasicGeoposition cityPosition = new BasicGeoposition() { Latitude = 48.858, Longitude = 2.295};
Geopoint cityCenter = new Geopoint(cityPosition);
StreetsidePanorama panoramaNearCity = await StreetsidePanorama.FindNearbyAsync(cityCenter);
// Set the Streetside view if a panorama exists.
if (panoramaNearCity != null)
{
// Create the Streetside view.
StreetsideExperience ssView = new StreetsideExperience(panoramaNearCity);
ssView.OverviewMapVisible = true;
MapControl1.CustomExperience = ssView;
}
}
else
{
// If Streetside is not supported
ContentDialog viewNotSupportedDialog = new ContentDialog()
{
Title = "Streetside is not supported",
Content ="\nStreetside views are not supported on this device.",
PrimaryButtonText = "OK"
};
await viewNotSupportedDialog.ShowAsync();
}
}
Luchtfoto 3D-weergaven weergeven
Geef een 3D-perspectief van de kaart op met behulp van de MapScene klasse. De kaartscène vertegenwoordigt de 3D-weergave die op de kaart wordt weergegeven. De MapCamera klasse vertegenwoordigt de positie van de camera die een dergelijke weergave zou weergeven.
Als u gebouwen en andere functies op het kaartoppervlak wilt weergeven in 3D, stelt u de eigenschap Style van het kaartbesturingselement in op MapStyle.Aerial3DWithRoads. Dit is een voorbeeld van een 3D-weergave met de stijl Aerial3DWithRoads.
Een 3D-weergave weergeven
- Bepaal of 3D-weergaven op het apparaat worden ondersteund door Is3DSupportedte controleren.
- Als 3D-weergaven worden ondersteund, stelt u de eigenschap Style van het kaartbesturingselement in op MapStyle.Aerial3DWithRoads-.
- Maak een MapScene-object met behulp van een van de vele CreateFrom methoden, zoals CreateFromLocationAndRadius en CreateFromCamera.
- Roep TrySetSceneAsync- aan om de 3D-weergave weer te geven. U kunt ook een optionele animatie opgeven die moet worden gebruikt wanneer de weergave verandert door een constante op te geven uit de opsomming MapAnimationKind.
In dit voorbeeld ziet u hoe u een 3D-weergave kunt weergeven.
private async void display3DLocation()
{
if (MapControl1.Is3DSupported)
{
// Set the aerial 3D view.
MapControl1.Style = MapStyle.Aerial3DWithRoads;
// Specify the location.
BasicGeoposition hwGeoposition = new BasicGeoposition() { Latitude = 43.773251, Longitude = 11.255474};
Geopoint hwPoint = new Geopoint(hwGeoposition);
// Create the map scene.
MapScene hwScene = MapScene.CreateFromLocationAndRadius(hwPoint,
80, /* show this many meters around */
0, /* looking at it to the North*/
60 /* degrees pitch */);
// Set the 3D view with animation.
await MapControl1.TrySetSceneAsync(hwScene,MapAnimationKind.Bow);
}
else
{
// If 3D views are not supported, display dialog.
ContentDialog viewNotSupportedDialog = new ContentDialog()
{
Title = "3D is not supported",
Content = "\n3D views are not supported on this device.",
PrimaryButtonText = "OK"
};
await viewNotSupportedDialog.ShowAsync();
}
}
Informatie over locaties ophalen
Krijg informatie over locaties op de kaart door de volgende methoden van de MapControl-aan te roepen.
- methode TryGetLocationFromOffset - Haal de geografische locatie op die overeenkomt met het opgegeven punt in de viewport van het kaartbesturingselement.
- Methode GetOffsetFromLocation : haal het punt op in de viewport van het kaartbesturingselement dat overeenkomt met de opgegeven geografische locatie.
- methode IsLocationInView - Bepaal of de opgegeven geografische locatie momenteel zichtbaar is in de viewport van het kaartbesturingselement.
- methode FindMapElementsAtOffset - Haal de elementen op de kaart op die zich op het opgegeven punt in de viewport van de kaartcontrole bevinden.
Interactie en wijzigingen afhandelen
Gebruikersinvoerbewegingen op de kaart verwerken door de volgende gebeurtenissen van de MapControl-te verwerken. Controleer de waarden van de eigenschappen Locatie en Positie in de MapInputEventArgsom informatie te verkrijgen over de geografische locatie op de kaart en de fysieke positie in de viewport waar het gebaar is opgetreden.
Bepaal of de kaart wordt geladen of volledig is geladen door de LoadStatusChanged gebeurtenis van het besturingselement te verwerken.
Afhandelen van wijzigingen die optreden wanneer de gebruiker of de app de instellingen van de kaart wijzigt door de volgende gebeurtenissen van de MapControl-te verwerken.
Aanbevelingen voor best practices
Gebruik voldoende schermruimte (of het hele scherm) om de kaart weer te geven, zodat gebruikers niet te veel hoeven te pannen en inzoomen om geografische informatie weer te geven.
Als de kaart alleen wordt gebruikt om een statische, informatieve weergave weer te geven, is het misschien beter om een kleinere kaart te gebruiken. Als u met een kleinere, statische kaart gaat, baseert u de afmetingen ervan op bruikbaarheid: klein genoeg om voldoende schermruimte te besparen, maar groot genoeg om leesbaar te blijven.
Sluit de interessante punten in de kaartscene in met behulp van kaartelementen; eventuele aanvullende informatie kan worden weergegeven als tijdelijke gebruikersinterface die de kaartscene overlayt.