내보내기(0) 인쇄
모두 확장
정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

Windows Phone 8의 지도 및 탐색

2014-06-18

적용 대상: Windows Phone 8 및 Windows Phone Silverlight 8.1만

 

Windows Phone 8 의 새로운 지도 API를 사용하여 지도 기반 앱을 개발하고 위치 및 검색 기능을 통합할 수 있습니다. 이 항목에서는 새로운 지도 컨트롤, 지도 모드 및 지도 뷰를 소개합니다.

참고참고:

Windows Phone 8 에서 새롭게 제공되는 지도 API는 Windows Phone OS 7.1 에서 사용 가능한 Bing 지도와는 다릅니다. Bing 지도 컨트롤은 Windows Phone 8 에서도 계속 지원되기는 하지만 더 이상 사용되지는 않습니다. 일반적으로는 Windows Phone OS 7.1 에서 Windows Phone 8 으로 기존 앱을 업그레이드한 경우에만 Bing 지도 컨트롤을 사용해야 합니다.

Icon to indicate an SDK sample

이 항목에서 설명한 몇 가지 작업을 나타내는 샘플을 보려면 간단한 지도 컨트롤 샘플을 다운로드하세요.

Pushpin을 포함하여 Maps API의 유용한 확장 기능이 필요하면, Windows Phone Toolkit를 다운로드하세요.

이 항목에는 다음 단원이 포함되어 있습니다.

 

Windows Phone 8 앱에 지도를 표시하려면 Map 컨트롤을 사용합니다. 자세한 내용은 Windows Phone 8에서 지도 컨트롤을 페이지에 추가하는 방법을 참조하세요.

중요중요:

컨트롤을 사용하려면 앱 매니페스트 파일에서 ID_CAP_MAP 기능을 선택해야 합니다. 자세한 내용은 Windows Phone 8의 앱 매니페스트 파일을 수정하는 방법을 참조하세요.

XAML로 지도 표시

다음 코드 예에서는 XAML을 사용하여 Map 컨트롤을 Windows Phone 8 앱에 표시하는 방법을 보여 줍니다.


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <maps:Map />
</Grid>

XAML을 작성하여 컨트롤을 추가하면 다음 xmlns 선언도 phone:PhoneApplicationPage 요소에 추가해야 합니다. 도구 상자에서 지도 컨트롤을 끌어서 놓으면 이 선언이 자동으로 추가됩니다.

xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"

코드로 지도 표시

다음 코드 예에서는 코드를 사용하여 Map 컨트롤을 Windows Phone 8 앱에 표시하는 방법을 보여 줍니다.

using Microsoft.Phone.Maps.Controls;

...

    Map MyMap = new Map();
    ContentPanel.Children.Add(MyMap);

기본 제공 시작 관리자를 사용하여 지도 표시

이 항목에서는 앱 안에 지도를 표시하는 코드를 작성하는 방법을 설명합니다. 단순히 지도를 표시하려는 경우에는 기본 제공 지도 앱을 시작하는 지도 작업을 사용할 수도 있습니다. 자세한 내용은 Windows Phone 8의 지도 작업을 사용하는 방법을 참조하세요.

다음 표에서는 지도를 표시하거나 관리하는 기본 제공 시작 관리자를 모두 목록으로 표시합니다. 시작 관리자에 대한 자세한 내용은 Windows Phone 8의 시작 관리자 및 선택자를 참조하세요.

시작 관리자

추가 정보

지도 작업

기본 제공 지도 앱을 시작하고 원하는 경우 위치를 표시합니다.

Windows Phone 8의 지도 작업을 사용하는 방법

지도 길 찾기 작업

기본 제공 지도 앱을 시작하고 길 찾기를 표시합니다.

Windows Phone 8의 지도 길 찾기 작업 사용 방법

MapDownloader 작업

오프라인에서 사용할 수 있도록 지도를 다운로드합니다.

Windows Phone 8의 MapDownloader 작업을 사용하는 방법

MapUpdater 작업

사용자가 이전에 다운로드한 오프라인 지도의 업데이트를 확인합니다.

Windows Phone 8의 MapUpdaterTask를 사용하는 방법

지도를 표시한 후에 가장 먼저 수행하는 작업 중 하나는 지도의 중심과 확대/축소 수준을 설정하는 일입니다.

참고참고:

지도 컨트롤을 초기화하는 동안 CenterChangedZoomLevelChanged 이벤트는 초기화 후마다 한 번 발생됩니다. 이러한 이벤트를 처리할 경우 컨트롤을 초기화한 후 사용자 상호 작용이 시작되기 전에 이벤트가 처음 발생했을 때 코드에서 올바르게 처리하는지 확인해야 합니다.

지도의 중심 지정

Map 컨트롤의 Center 속성을 사용하여 해당 중심을 설정할 수 있습니다. XAML을 사용하여 속성을 설정하려면 쌍(위도, 경도)을 Center 속성에 할당합니다.

다음 코드 예제에서는 XAML을 사용하여 Map의 중심을 설정하는 방법을 보여 줍니다.


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <maps:Map x:Name="MyMap" Center="47.6097, -122.3331" />
</Grid>


다음 코드 예제에서는 코드를 사용하여 Map의 중심을 설정하는 방법을 보여 줍니다.

using Microsoft.Phone.Maps.Controls;
using System.Device.Location;

...

    Map MyMap = new Map();
    MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
    ContentPanel.Children.Add(MyMap);
}

주의주의:

Latitude 속성 및 Longitude 속성을 사용하여 지도 컨트롤의 중심을 설정하지 마세요. 대신 새 GeoCoordinate 개체를 만든 다음 위의 코드 예제에 나와 있는 대로 Center 속성에 할당합니다.

지도의 확대/축소 수준 지정

ZoomLevel 속성을 사용하여 지도를 표시할 초기 해상도를 설정합니다 ZoomLevel 속성은 1~20 범위의 값을 사용합니다. 여기서 1은 완전히 축소된 지도를 나타내고 확대/축소 수준이 더 크면 더 높은 해상도로 확대됩니다. 다음 코드 예에서는 XAML 및 코드에서 ZoomLevel 속성을 사용하여 지도의 확대/축소 수준을 설정하는 방법을 보여 줍니다.

다음 코드 예에서는 XAML에서 ZoomLevel 속성을 사용하여 지도 확대/축소 수준을 설정하는 방법을 보여 줍니다.


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <maps:Map x:Name="MyMap" Center="47.6097, -122.3331" ZoomLevel="10"/>
</Grid>


다음 코드 예에서는 코드에서 ZoomLevel 속성을 사용하여 지도의 확대/축소 수준을 설정하는 방법을 보여 줍니다.

using Microsoft.Phone.Maps.Controls;
using System.Device.Location;

...

    Map MyMap = new Map();
    MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
    MyMap.ZoomLevel = 10;
    ContentPanel.Children.Add(MyMap);
}

지도 컨트롤의 Center 속성에는 System.Device.Location 네임스페이스의 GeoCoordinate 유형 값이 필요합니다. Windows.Devices.Geolocation 네임스페이스에서 위치 서비스를 사용하는 경우 지도 컨트롤과 함께 사용하려면 Windows.Devices.Geolocation.Geocoordinate 값을 System.Device.Location.GeoCoordinate 값으로 변환해야 합니다.

Windows Phone Toolkit를 다운로드하여 확장 메서드를 가져와서 Maps API에 대한 유용한 확장 기능과 함께 이 변환을 수행할 수 있습니다. 자신만의 코드를 작성하려는 경우 다음은 GeocoordinateGeoCoordinate으로 변환하는 데 사용할 수 있는 메서드의 예입니다.

using System;
using System.Device.Location; // Contains the GeoCoordinate class.
using Windows.Devices.Geolocation; // Contains the Geocoordinate class.

namespace CoordinateConverter
{
    public static class CoordinateConverter
    {
        public static GeoCoordinate ConvertGeocoordinate(Geocoordinate geocoordinate)
        {
            return new GeoCoordinate
                (
                geocoordinate.Latitude,
                geocoordinate.Longitude,
                geocoordinate.Altitude ?? Double.NaN,
                geocoordinate.Accuracy,
                geocoordinate.AltitudeAccuracy ?? Double.NaN,
                geocoordinate.Speed ?? Double.NaN,
                geocoordinate.Heading ?? Double.NaN
                );
        }
    }
}

랜드마크, 보행자 기능 등의 추가 요소를 지도에 표시할 수도 있습니다.

  • 랜드마크. LandmarksEnabled 속성을 true로 설정하여 Map 컨트롤에 랜드마크를 표시합니다. 랜드마크는 ZoomLevel 속성이 16 이상의 값으로 설정된 경우에만 지도에 표시됩니다.

  • 보행자 기능. Map 컨트롤에서 PedestrianFeaturesEnabledtrue로 설정하여 공공 계단과 같은 보행자 기능을 표시합니다. 보행자 기능은 ZoomLevel 속성이 16 이상의 값으로 설정된 경우에만 지도에 표시됩니다.

다음 그림에서는 이정표 및 보행자 기능이 있는 맵을 표시합니다.

Landmarks and Pedestrian Features

다음 예에서는 XAM에서 PedestrianFeaturesEnabled 속성과 LandmarksEnabled 속성을 설정하는 방법을 보여 줍니다.

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <maps:Map Center="47.6097, -122.3331" ZoomLevel="16" LandmarksEnabled="true" PedestrianFeaturesEnabled="true"/>
        </Grid>

다음 예에서는 코드에서 이러한 속성을 설정하는 방법을 보여 줍니다.

using Microsoft.Phone.Maps.Controls;
using System.Device.Location;

...

    Map MyMap = new Map();
    MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
    MyMap.ZoomLevel = 16;
    MyMap.LandmarksEnabled = true;
    MyMap.PedestrianFeaturesEnabled = true;
    ContentPanel.Children.Add(MyMap);
}

지도 중심 및 확대/축소 수준을 설정한 후에는 지도 제작 모드를 설정할 수 있습니다. 지도 제작 모드에서는 Map 컨트롤에서 좌표계 표시 및 화면 좌표에서 표준 좌표로의 좌표계 변환을 정의합니다. Map 컨트롤의 CartographicMode 속성을 사용하여 지도 제작 모드를 설정할 수 있습니다. 이 속성은 MapCartographicMode 열거에서 값을 가져옵니다. MapCartographicMode 열거에서 지원되는 지도 제작 모드 유형은 다음과 같습니다.

  • Road: 일반적인 기본 2D 지도를 표시합니다.

  • Aerial: 항공 사진 지도를 표시합니다.

  • Hybrid: 도로와 레이블이 겹쳐진 위성뷰를 표시합니다.

  • Terrain: 산, 강 등의 입면과 하천을 표시하기 위한 물리적 양각 이미지를 표시합니다.

다음 그림에 이 네 가지 지도 제작 모드가 표시되어 있습니다.

Cartographic Modes

다음 예제에서는 기본 Road 모드의 지도를 보여 줍니다. 앱 모음의 버튼을 사용하여 Aerial, HybridTerrain 모드에서 지도를 볼 수 있습니다.

참고참고:

다음 예를 테스트하려면 프로젝트에 이미지 폴더를 만들고 앱 바 버튼의 이미지를 제공해야 합니다.

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
   </Grid.RowDefinitions>
   <!--TitlePanel contains the name of the application and page title-->
   <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="map modes" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
   </StackPanel>
   <!--ContentPanel - place additional content here-->
   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <maps:Map x:Name="MyMap"  Center="13.0810, 80.2740" ZoomLevel="10"/>
   </Grid>
</Grid>
<!--Sample code showing usage of ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Road" Click="Road_Click"/>
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Aerial" Click="Aerial_Click"/>
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button3.png" Text="Hybrid" Click="Hybrid_Click"/>
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button4.png" Text="Terrain" Click="Terrain_Click"/>
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
void Road_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Road;
}

void Aerial_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Aerial;
}

void Hybrid_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Hybrid;
}

void Terrain_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Terrain;
}

ColorMode 속성을 사용하여 지도를 연한 색 모드 또는 진한 색 모드로 표시할 수 있습니다. 이 속성에서 가져올 수 있는 Light 또는 Dark 값은 MapColorMode 열거에 포함되어 있습니다. 기본값은 Light입니다.

다음 그림에서 첫 번째 지도는 Light 색 모드이고, 두 번째 지도는 Dark 색 모드입니다.

Color Modes

다음 코드 예제에서는 기본 Light 모드의 지도를 보여 줍니다. 앱 모음의 버튼을 사용하여 Light 또는 Dark 모드에서 지도를 볼 수 있습니다.

참고참고:

다음 예를 테스트하려면 프로젝트에 이미지 폴더를 만들고 앱 바 버튼의 이미지를 제공해야 합니다.

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="color modes" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <maps:Map x:Name="MyMap" />
        </Grid>
    </Grid>
    <!--Sample code showing usage of ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Light" Click="Light_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Dark" Click="Dark_Click"/>
        </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
void Light_Click(object sender, EventArgs args)
{
   MyMap.ColorMode = MapColorMode.Light;
}

void Dark_Click(object sender, EventArgs args)
{
   MyMap.ColorMode = MapColorMode.Dark;
}

지도 앱에서 일반적으로 사용되는 시나리오는 지도의 위치 사이를 이동하거나 뷰 사이를 이동하는 것입니다. 이동, 확대/축소, 회전, 각도 조절 등으로 인해 지도 위치가 변경될 때마다 새로운 지도 뷰가 정의됩니다.

코드에서 지도 뷰를 정의하려면 SetView 메서드를 사용합니다. SetView 메서드를 사용하여 오버로드에 전달할 수 있는 매개 변수에는 뷰의 중심, 확대/축소 수준, 방향, 피치, LocationRectangle 및 뷰 사이를 이동하는 데 사용할 애니메이션의 종류 등이 있습니다.

SetView 매개 변수

다음 목록에서는 SetView 메서드의 매개 변수에 대해 설명합니다.

  • center: 지도 뷰의 중심을 전달할 때 사용하는 매개 변수입니다. 이 매개 변수는 GeoCoordinate 개체로 정의됩니다.

  • zoomLevel: 지도에서 사용 가능한 여러 상세 수준을 나타내는 매개 변수입니다. 이 매개 변수를 사용하여 1에서 20 사이의 값을 지정할 수 있습니다. 사용 가능한 최대 상세 수준은 확대하는 위치에 따라 결정됩니다. 일부 영역의 경우 다른 영역보다 더 자세하게 확대할 수 있습니다. 확대/축소 수준이 높으면 지도의 뷰를 더 많이 확대/축소하는 것입니다. 확대/축소 수준이 1이면 뷰가 최대로 축소된 것입니다.

  • heading: 지도에서 "위쪽"을 가리키는 방향을 지정하는 매개 변수입니다. 이 매개 변수는 0에서 360 사이의 값을 통해 기하학적 각도로 표시되는데, 이 값은 지도를 회전하는 각도에 해당하는 숫자를 나타냅니다. 예를 들어 0도 또는 360도는 북쪽, 90도는 서쪽, 180도는 남쪽, 270도는 동쪽을 나타냅니다. 다음 다이어그램에 각 방향이 나와 있습니다.

    Heading
  • pitch: 지도의 각도를 조절하는 정도를 지정하는 매개 변수입니다. 이 매개 변수는 0에서 180 사이의 값으로 표시되는데, 이 값은 지도 각도를 조절할 각도에 해당하는 숫자를 나타냅니다. 다음 다이어그램에 피치가 나와 있습니다.

    Pitch
  • boundingRectangle: Map 컨트롤이 포함된 LocationRectangle 개체를 나타내는 매개 변수입니다.

  • animationKind: 뷰 변경 시 표시할 애니메이션 종류를 설정하는 데 사용하는 매개 변수입니다. 사용 가능한 애니메이션 설정은 MapAnimationKind 열거에서 확인할 수 있습니다. animationKind 매개 변수로 None을 전달하면 지도가 뷰 변경 애니메이션을 표시하는 대신 새 뷰로 스냅됩니다.

애니메이션 예

다음 예에는 기본 중심 및 확대/축소 수준이 적용된 지도가 표시되어 있습니다. 앱 바에서 변경 버튼을 클릭하면 새로운 중심과 확대/축소 수준이 적용된 지도가 표시됩니다. 애니메이션 버튼을 클릭하면 애니메이션을 통해 지도가 새로운 중심 및 확대/축소 수준으로 전환됩니다.


<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
   </Grid.RowDefinitions>

   <!--TitlePanel contains the name of the application and page title-->
   <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="MapView" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
   </StackPanel>

   <!--ContentPanel - place additional content here-->
   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <maps:Map x:Name="MyMap"  Center="13.0810, 80.2740" ZoomLevel="10"/>
   </Grid>
</Grid>

<!--Sample code showing usage of ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBarIconButton x:Name="BtnZoom"  IconUri="/Images/appbar_button2.png" Text="Change" Click="OnCenterZoom_Click"/>
      <shell:ApplicationBarIconButton x:Name="BtnCenter"  IconUri="/Images/appbar_button1.png" Text="Animate" Click="OnAnimate_Click"/>
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>


void OnCenterZoom_Click(object sender, EventArgs args)
{
   MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
   MyMap.ZoomLevel = 18;
}

void OnAnimate_Click(object sender, EventArgs args)
{
   MyMap.SetView(new GeoCoordinate(47.6097, -122.3331), 15, MapAnimationKind.Parabolic);
}

앱에서 지도 서비스를 사용하려면 지도 서비스 응용프로그램 ID와 토큰을 앱 코드에 포함해야 합니다. 자세한 내용은 Windows Phone 8에서 지도 컨트롤을 페이지에 추가하는 방법을 참조하세요.

지도 서비스의 지속적인 사용에는 사용 약관이 적용됩니다. 이러한 서비스 중 일부를 Nokia에서 공급하므로 Microsoft에서 지도 서비스를 사용하는 개발자 ID를 Nokia와 공유할 수도 있습니다.

표시:
© 2015 Microsoft