2D, 3D 및 Streetside 뷰가 있는 지도 표시
지도 장소 카드라는 빠른 해제 가능 창 또는 전체 기능을 갖춘 지도 컨트롤에서 지도를 표시할 수 있습니다.
지도 샘플을 다운로드하여 이 가이드에 설명된 몇 가지 기능을 시도해 보세요.
장소 카드에서 지도 표시
UI 요소 또는 사용자가 터치하는 앱의 영역 위, 아래, 또는 측면에 있는 경량 팝업 창 내에서 지도를 표시할 수 있습니다. 지도는 앱의 정보와 관련된 도시나 주소를 표시할 수 있습니다.
이 장소 카드는 시애틀을 보여 줍니다.
장소 카드에서 시애틀이 단추 아래에 표시되도록 하는 코드는 다음과 같습니다.
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);
}
이 장소 카드는 시애틀에서 Space Needle의 위치를 보여 줍니다.
장소 카드에서 Space Needle이 단추 아래에 표시되도록 하는 코드는 다음과 같습니다.
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);
}
컨트롤에서 지도 표시
지도 컨트롤을 사용하여 앱에서 풍부하고 사용자 지정 가능한 지도 데이터를 보여 줍니다. 지도 컨트롤은 도로 지도, 위성뷰, 3D, 뷰, 길 찾기, 검색 결과, 교통 정보 등을 표시할 수 있습니다. 사용자의 위치, 방향 및 관심 지점을 지도에 표시할 수 있습니다. 지도는 항공 3D 뷰, 거리 뷰, 도로 상황, 대중 교통 및 지역 사업체를 표시할 수도 있습니다.
앱 내에서 사용자가 지도로 앱별 또는 일반 지리 정보를 볼 수 있게 하려면 지도 컨트롤을 사용하세요. 앱에 지도 컨트롤이 있으면 사용자가 해당 정보를 보기 위해 앱 외부로 나갈 필요가 없습니다.
참고 항목
사용자가 앱을 벗어나도 상관없는 경우 Windows 지도 앱을 사용하여 해당 정보를 제공하는 것이 좋습니다. 앱에서 Windows 지도 앱을 시작하면 특정 지도, 방향 및 검색 결과를 표시할 수 있습니다. 자세한 내용은 Windows 지도 앱 실행을 참조하세요.
앱에 지도 컨트롤 추가
MapControl을 추가해서 XAML 페이지에 지도를 표시하세요. MapControl을 사용하려면 XAML 페이지 또는 코드에서 Windows.UI.Xaml.Controls.Maps 네임스페이스를 선언해야 합니다. 도구 상자에서 해당 컨트롤을 끌어오면 이 네임스페이스 선언이 자동으로 추가됩니다. MapControl을 XAML 페이지에 수동으로 추가하려면 해당 네임스페이스 선언을 페이지 맨 위에 수동으로 추가해야 합니다.
다음 예제에서는 터치 입력을 수락하는 것 외에도 기본 지도 컨트롤을 표시하고, 확대/축소 컨트롤 및 기울기 컨트롤이 표시되도록 지도를 구성합니다.
<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>
코드에 지도 컨트롤을 추가하려면 코드 파일 맨 위에서 네임스페이스를 수동으로 선언해야 합니다.
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);
지도 인증 키 가져오기/설정하기
MapControl 및 지도 서비스를 사용하려면 먼저 지도 인증 키를 MapServiceToken 속성의 값으로 지정해야 합니다. 이전 예제에서는 EnterYourAuthenticationKeyHere을(를) Bing 지도 개발자 센터에서 가져온 키로 바꿉니다. 지도 인증 키를 지정할 때까지 경고: MapServiceToken을 지정하지 않았습니다 텍스트가 컨트롤 하단에 계속 표시됩니다. 맵 인증 키 가져오기 및 설정에 대한 자세한 내용은 맵 인증 키 요청을 참조하세요.
지도의 위치 설정
지도에서 원하는 위치를 가리키거나 사용자의 현재 위치를 사용합니다.
지도의 시작 위치 설정하기
코드에서 MapControl의 Center(가운데) 속성을 지정하거나 XAML 태그에 속성을 바인딩해서 지도에 표시할 위치를 설정하세요. 다음 예제에서는 시애틀 시가 중심인 지도를 표시합니다.
참고 항목
문자열을 Geopoint로 변환할 수 없으므로 데이터 바인딩을 사용하지 않을 경우 XAML 태그에서 Center 속성 값을 지정할 수 없습니다. (이 제한은 MapControl.Location 연결 속성에도 적용됩니다.)
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;
}
지도의 현재 위치 설정하기
앱이 사용자의 위치에 액세스하려면 먼저 앱이 RequestAccessAsync 메서드를 호출해야 합니다. 이때 앱이 포그라운드에 있어야 하고 RequestAccessAsync가 UI 스레드에서 호출되어야 합니다. 사용자가 자신의 위치에 대한 권한을 앱에 부여하기 전에는 앱이 위치 데이터에 액세스할 수 없습니다.
Geolocator 클래스의 GetGeopositionAsync 메서드를 사용해서 디바이스의 현재 위치(위치가 제공되는 경우)를 가져오세요. 해당하는 Geopoint를 가져오려면 GeoPosition 측 GeoCoordinate의 Point 속성을 사용하세요. 자세한 내용은 현재 위치 가져오기를 참조하세요.
// 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;
}
지도에 디바이스의 위치를 표시할 때는 그래픽을 표시하고 위치 데이터의 정확도에 따라 확대/축소 수준을 설정하는 것이 좋습니다. 자세한 내용은 위치 인식 앱 관련 지침을 참조하세요.
지도 위치 변경하기
2D 지도에 표시되는 위치를 변경하려면 TrySetViewAsync 메서드의 오버로드 중 하나를 호출하세요. 이 메서드를 사용하여 Center, ZoomLevel, Heading 및 Pitch의 새 값을 지정하세요. MapAnimationKind 열거형을 통해 상수를 제공함으로써 뷰가 변경될 경우 사용할 선택적 애니메이션을 지정할 수도 있습니다.
3D 지도의 위치를 변경하려면 TrySetSceneAsync 메서드를 대신 사용하세요. 자세한 내용은 3D 위성뷰 표시를 참조하세요.
지도에 GeoboundingBox의 내용을 표시하려면 TrySetViewBoundsAsync 메서드를 호출하세요. 그 예로 이 메서드를 사용하면 경로 또는 경로의 일부를 지도에 표시할 수 있습니다. 자세한 내용은 지도에 경로 및 방향 표시하기를 참조하세요.
지도의 모양 변경
지도의 모양과 느낌을 사용자 지정하려면, 지도 컨트롤의 StyleSheet 속성을 기존 MapStyleSheet 개체 중 하나로 설정합니다.
myMap.StyleSheet = MapStyleSheet.RoadDark();
JSON을 사용하여 사용자 지정 스타일을 정의한 다음, 이 JSON을 사용하여 MapStyleSheet 개체를 만들 수 있습니다.
스타일시트 JSON은 맵 스타일시트 편집기 애플리케이션을 사용하여 대화식으로 만들 수 있습니다.
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""
}
}
}
");
전체 JSON 항목에 대한 참조는 지도 스타일시트 참조를 보세요.
기존 시트로 시작한 후, JSON을 사용하여 원하는 요소를 재정의 할 수 있습니다. 이 예제는 기존 스타일로 시작한 후 JSON을 사용하여 물 영역의 색상만 변경한 것입니다.
MapStyleSheet \customSheet = MapStyleSheet.ParseFromJson(@"
{
""version"": ""1.0"",
""elements"": {
""water"": {
""fillColor"": ""#DDDDDD""
}
}
}
");
MapStyleSheet builtInSheet = MapStyleSheet.RoadDark();
myMap.StyleSheet = MapStyleSheet.Combine(new List<MapStyleSheet> { builtInSheet, customSheet });
참고 항목
두 번째 스타일시트에서 정의한 스타일이 첫 번째 스타일을 재정의합니다.
방향 및 원근 설정
원하는 효과에 맞는 각도를 얻기 위해 지도 카메라를 확대, 축소, 회전, 이동합니다. 다음 속성을 시도해 보세요.
- Center 속성을 설정해서 지도의 중심을 지리적 지점으로 설정하세요.
- ZoomLevel 속성을 1~20 사이의 값으로 설정해서 지도의 확대/축소 수준을 설정하세요.
- Heading(방향) 속성(0도 또는 360도 = 북쪽, 90도 = 동쪽, 180도 = 남쪽, 270도 = 서쪽)을 설정해서 지도의 회전을 설정하세요.
- DesiredPitch 속성을 0~65도 사이의 값으로 설정해서 지도의 기울기를 설정하세요.
지도 기능 표시 및 숨김
다음 MapControl의 속성 값을 설정하여 도로와 랜드마크 같은 지도의 기능을 표시하거나 숨깁니다.
LandmarksVisible 속성을 사용하거나 사용하지 않도록 설정해서 지도에 건물 및 랜드마크를 표시하세요.
참고 항목
건물을 표시하거나 숨길 수는 있지만 3D로 표시되지 않도록 할 수는 없습니다.
PedestrianFeaturesVisible 속성을 사용하거나 사용하지 않도록 설정해서 지도에 보행자 기능(예: 공용 계단)을 표시하세요.
TrafficFlowVisible 속성을 사용하거나 사용하지 않도록 설정해서 지도에 트래픽을 표시하세요.
WatermarkMode 속성을 MapWatermarkMode 상수 중 하나로 설정해서 워터마크가 지도에 표시되는지 여부를 지정하세요.
MapRouteView를 지도 컨트롤의 Routes(경로) 컬렉션에 추가해서 지도에 주행 또는 도보 경로를 표시하세요. 자세한 정보 및 예제는 지도에 경로 및 방향 표시하기를 참조하세요.
MapControl에서 압정, 도형 및 XAML 컨트롤을 표시하는 방법에 대한 자세한 내용은 지도에 POI(관심 지점) 표시하기를 참조하세요.
거리 뷰 표시하기
거리 뷰는 위치의 거리 수준 투시도로, 지도 컨트롤 맨 위에 표시됩니다.
원래 지도 컨트롤에 표시된 지도와는 별도로 거리 뷰의 "내부" 환경을 고려하세요. 예를 들면 거리 뷰에서 위치를 변경하더라도, 거리 뷰 "아래"에 나오는 지도의 위치 또는 모양은 달라지지 않습니다. 컨트롤의 오른쪽 상단에 있는 X를 클릭해서 거리 뷰를 닫은 후에도 원래의 지도는 변경되지 않은 상태로 유지됩니다.
거리 뷰를 표시하려면
- IsStreetsideSupported를 검사해서 디바이스에서 거리 뷰가 지원되는지 확인하세요.
- 거리 뷰가 지원되면 FindNearbyAsync를 호출해서 지정된 위치 근처에 StreetsidePanorama를 만드세요.
- StreetsidePanorama가 null이 아닌지 검사해서 근처에 파노라마가 있는지 확인하세요.
- 근처에 파노라마가 있으면 지도 컨트롤의 CustomExperience 속성에 대한 StreetsideExperience를 생성하세요.
이 예제에서는 이전 이미지와 유사한 거리 뷰를 표시하는 방법을 보여줍니다.
참고 항목
지도 컨트롤이 지나치게 작으면 개요 지도가 표시되지 않습니다.
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();
}
}
항공 3D 뷰 표시하기
MapScene 클래스를 사용해서 지도의 3D 투시도를 지정하세요. 지도 장면은 지도에 표시되는 3D 뷰를 나타냅니다. MapCamera 클래스는 이러한 뷰를 표시하는 카메라의 위치를 나타냅니다.
지도 화면의 건물 및 기타 기능을 3D로 표시하려면 지도 컨트롤의 Style(스타일) 속성을 MapStyle.Aerial3DWithRoads로 설정하세요. 이는 Aerial3DWithRoads 스타일을 사용하는 3D 뷰의 예입니다.
3D 뷰를 표시하려면
- Is3DSupported를 검사해서 디바이스에서 3D 뷰가 지원되는지 확인하세요.
- 3D 뷰가 지원되면 지도 컨트롤의 Style(스타일) 속성을 MapStyle.Aerial3DWithRoads로 설정하세요.
- CreateFromLocationAndRadius 및 CreateFromCamera 등등 여러 가지 CreateFrom 메서드 중 하나를 사용해서 MapScene 개체를 생성하세요.
- 3D 뷰를 표시하려면 TrySetSceneAsync를 호출하세요. MapAnimationKind 열거형을 통해 상수를 제공함으로써 뷰가 변경될 경우 사용할 선택적 애니메이션을 지정할 수도 있습니다.
이 예제에서는 3D 뷰를 표시하는 방법을 보여줍니다.
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();
}
}
위치에 대한 정보 가져오기
MapControl의 다음 메서드를 호출해서 지도의 위치에 대한 정보를 가져오세요.
- GetLocationFromOffset 메서드 - 지도 컨트롤의 뷰포트에서 지정된 지점에 해당하는 지리적 위치를 가져옵니다.
- GetOffsetFromLocation 메서드 - 지도 컨트롤의 뷰포트에서 지정된 지리적 위치에 해당하는 지점을 가져옵니다.
- IsLocationInView 메서드 - 지정된 지리적 위치가 현재 지도 컨트롤의 뷰포트에 표시되는지 여부를 확인합니다.
- FindMapElementsAtOffset 메서드 - 지도 컨트롤의 뷰포트에서 지정된 지점에 있는 지도 요소를 가져옵니다.
조작 및 변경 내용 처리
MapControl의 다음 이벤트를 처리해서 지도의 사용자 입력 제스처를 처리하세요. MapInputEventArgs의 Location(위치) 속성 및 Position(위치) 속성의 값을 검사해서 제스처가 발생한 지도상의 지리적 위치 및 뷰포트 내 물리적 위치에 대한 정보를 가져오세요.
컨트롤의 LoadingStatusChanged 이벤트를 처리해서 지도가 로드 중인지, 아니면 완전히 로드되었는지 확인하세요.
사용자 또는 앱이 MapControl의 다음 이벤트를 처리해서 지도의 설정을 변경할 때 발생하는 변화를 처리하세요.
모범 사례 권장 사항
사용자가 지리 정보를 보기 위해 과도하게 이동하고 확대/축소할 필요가 없도록 충분한 화면 공간(또는 전체 화면)을 사용하여 지도를 표시하세요.
고정형 정보 뷰를 표시할 때에만 지도를 사용할 경우, 더 작은 맵을 사용하는 것이 보다 적합할 수 있습니다. 더 작은 고정형 지도를 사용할 경우 지도의 크기는 사용 편의성을 기준으로 정합니다. 즉 화면 공간을 충분히 절약할 수 있을 만큼 작으면서도, 가독성을 유지할 수 있을 만큼 화면이 커야 합니다.
지도 요소를 사용해서 지도 장면에 관심 지점을 포함시키세요. 기타 모든 정보는 지도 장면을 오버레이하는 임시 UI로 표시할 수 있습니다.
관련 항목
- Bing 지도 개발자 센터
- UWP 지도 샘플
- 현재 위치 가져오기
- 위치 인식 앱에 대한 디자인 지침
- 빌드 2015 동영상: Windows 앱에서 휴대폰, 태블릿 및 PC 간에 지도 및 위치 활용
- UWP 교통 앱 샘플
- MapControl
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기