Xamarin.Forms 지도 컨트롤

아티클
05/20/2020

컨트롤은 Map 지도를 표시하고 주석을 추가하기 위한 플랫폼 간 보기입니다. 각 플랫폼에 대해 네이티브 맵 컨트롤을 사용하여 사용자에게 빠르고 친숙한 지도 환경을 제공합니다.

클래스는 Map 맵 모양 및 동작을 제어하는 다음 속성을 정의합니다.

IsShowingUser형식 bool의 맵에 사용자의 현재 위치가 표시되는지 여부를 나타냅니다.
ItemsSource- 표시할 항목의 컬렉션을 지정하는 형식 IEnumerable입니다 IEnumerable .
ItemTemplate- 표시된 항목 컬렉션의 DataTemplate 각 항목에 적용할 항목을 지정하는 형식DataTemplate입니다.
ItemTemplateSelector- DataTemplateSelector런타임에 항목에 DataTemplateSelector 대해 선택하는 DataTemplate 데 사용할 형식을 지정합니다.
HasScrollEnabled형식 bool의 맵을 스크롤할 수 있는지 여부를 결정합니다.
HasZoomEnabled형식 bool의 맵을 확대/축소할 수 있는지 여부를 결정합니다.
MapElements형식 IList<MapElement>의 다각형 및 다각형과 같은 맵의 요소 목록을 나타냅니다.
MapType형식 MapType의 맵의 표시 스타일을 나타냅니다.
MoveToLastRegionOnLayoutChange형식 bool의 는 레이아웃 변경이 발생할 때 표시된 지도 영역이 현재 지역에서 이전에 설정된 영역으로 이동할지 여부를 제어합니다.
Pins형식 IList<Pin>의 맵에 있는 핀 목록을 나타냅니다.
TrafficEnabled형식 bool의 트래픽 데이터가 맵에 오버레이되는지 여부를 나타냅니다.
VisibleRegion형식 MapSpan의 맵은 현재 표시된 맵 영역을 반환합니다.

및 속성을 제외한 MapElementsPinsVisibleRegion 이러한 속성은 개체에 의해 BindableProperty 지원되므로 데이터 바인딩의 대상이 될 수 있습니다.

또한 클래스는 Map 맵을 MapClicked 탭할 때 발생하는 이벤트를 정의합니다. MapClickedEventArgs 이벤트와 함께 제공되는 개체에는 형식Position의 단일 속성이 있습니다Position. 이벤트가 발생하면 Position 속성이 탭된 지도 위치로 설정됩니다. 구조체에 Position 대한 자세한 내용은 지도 위치 및 거리를 참조 하세요.

및 ItemTemplateItemTemplateSelector 속성에 ItemsSource대한 자세한 내용은 핀 컬렉션 표시를 참조하세요.

지도 표시

A Map 는 레이아웃 또는 페이지에 추가하여 표시할 수 있습니다.

<ContentPage ...
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps">
    <maps:Map x:Name="map" />
</ContentPage>

참고 항목

.지도 컨트롤을 참조Xamarin.Forms하려면 추가 xmlns 네임스페이스 정의가 필요합니다. 이전 예제 Xamarin.Forms.Maps 에서 네임스페이스는 키워드(keyword) 통해 maps 참조됩니다.

해당하는 C# 코드는 다음과 같습니다.

using Xamarin.Forms;
using Xamarin.Forms.Maps;

namespace WorkingWithMaps
{
    public class MapTypesPageCode : ContentPage
    {
        public MapTypesPageCode()
        {
            Map map = new Map();
            Content = map;
        }
    }
}

이 예제에서는 로마의 지도를 중심으로 하는 기본 Map 생성자를 호출합니다.

또는 인수를 MapSpan 생성자에 전달하여 Map 로드될 때 지도의 중심점 및 확대/축소 수준을 설정할 수 있습니다. 자세한 내용은 지도에 특정 위치 표시를 참조하세요.

맵 유형

속성을 Map.MapType 열거형 멤버로 MapType 설정하여 지도의 표시 스타일을 정의할 수 있습니다. MapType 열거형은 다음 멤버를 정의합니다.

Street 는 거리 지도가 표시되도록 지정합니다.
Satellite 는 위성 이미지가 포함된 맵이 표시되도록 지정합니다.
Hybrid 는 거리 및 위성 데이터를 결합한 지도가 표시되도록 지정합니다.

기본적으로 속성이 Map 정의되지 않은 경우 거리 맵이 MapType 표시됩니다. MapType 또는 이 속성을 열거형 멤버 중 MapType 하나로 설정할 수 있습니다.

<maps:Map MapType="Satellite" />

해당하는 C# 코드는 다음과 같습니다.

Map map = new Map
{
    MapType = MapType.Satellite
};

다음 스크린샷은 속성이 다음으로 Map 설정된 경우 MapType 를 보여 줍니다 Street.

다음 스크린샷은 속성이 다음으로 Map 설정된 경우 MapType 를 보여 줍니다 Satellite.

다음 스크린샷은 속성이 다음으로 Map 설정된 경우 MapType 를 보여 줍니다 Hybrid.

지도에 특정 위치 표시

맵이 로드될 때 표시할 맵의 영역은 생성자에 인수 Map 를 MapSpan 전달하여 설정할 수 있습니다.

<maps:Map>
    <x:Arguments>
        <maps:MapSpan>
            <x:Arguments>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>36.9628066</x:Double>
                        <x:Double>-122.0194722</x:Double>
                    </x:Arguments>
                </maps:Position>
                <x:Double>0.01</x:Double>
                <x:Double>0.01</x:Double>
            </x:Arguments>
        </maps:MapSpan>
    </x:Arguments>
</maps:Map>

해당하는 C# 코드는 다음과 같습니다.

Position position = new Position(36.9628066, -122.0194722);
MapSpan mapSpan = new MapSpan(position, 0.01, 0.01);
Map map = new Map(mapSpan);

이 예제에서는 개체에 Map 의해 지정 된 영역을 보여 주는 개체를 MapSpan 만듭니다. 개체는 MapSpan 개체가 나타내는 Position 위도 및 경도를 중심으로 하며 0.01 위도 및 0.01 경도에 걸쳐 있습니다. 구조체에 Position 대한 자세한 내용은 지도 위치 및 거리를 참조 하세요. XAML에서 인수를 전달하는 방법에 대한 자세한 내용은 XAML에서 인수 전달을 참조 하세요.

그 결과 지도가 표시되면 특정 위치의 중심이 되며 특정 수의 위도 및 경도에 걸쳐 있습니다.

MapSpan 개체 만들기

개체를 만드는 MapSpan 방법에는 여러 가지가 있습니다. 일반적인 방법은 생성자에 필요한 인수를 MapSpan 제공하는 것입니다. 개체로 표현되는 Position 위도 및 경도 및 위도 및 double 경도를 나타내는 값입니다 MapSpan. 구조체에 Position 대한 자세한 내용은 지도 위치 및 거리를 참조 하세요.

또는 클래스에 새 MapSpan 개체를 MapSpan 반환하는 세 가지 메서드가 있습니다.

ClampLatitudeMapSpan 는 메서드의 클래스 인스턴스와 동일 LongitudeDegrees 하고 해당 및 인수로 정의된 반지름을 northsouth 반환합니다.
FromCenterAndRadiusMapSpan 는 해당 인수와 인수로 Position 정의된 값을 반환합니다Distance.
WithZoomMapSpan 는 메서드의 클래스 인스턴스와 중심이 같지만 반경에는 인수 double 를 곱한 값을 반환합니다.

구조체에 Distance 대한 자세한 내용은 지도 위치 및 거리를 참조 하세요.

만든 MapSpan 후에는 다음 속성에 액세스하여 해당 데이터를 검색할 수 있습니다.

Center의 지리적 중심을 나타내는 Position 입니다 MapSpan.
LatitudeDegrees- 에 의해 MapSpan스팬되는 위도의 정도를 나타냅니다.
LongitudeDegrees- 에 의해 MapSpan스팬되는 경도의 정도를 나타냅니다.
Radius- 반경을 MapSpan 나타냅니다.

맵 이동

메서드를 Map.MoveToRegion 호출하여 지도의 위치 및 확대/축소 수준을 변경할 수 있습니다. 이 메서드는 MapSpan 표시할 지도의 영역과 확대/축소 수준을 정의하는 인수를 허용합니다.

다음 코드는 지도에서 표시된 지역을 이동하는 예제를 보여줍니다.

MapSpan mapSpan = MapSpan.FromCenterAndRadius(position, Distance.FromKilometers(0.444));
map.MoveToRegion(mapSpan);

맵 확대/축소

위치를 변경하지 않고 확대 Map /축소 수준을 변경할 수 있습니다. 이 작업은 맵 UI를 사용하거나 현재 위치를 인수로 Position 사용하는 인수를 사용하여 메서드를 MapSpan 호출 MoveToRegion 하여 프로그래밍 방식으로 수행할 수 있습니다.

double zoomLevel = 0.5;
double latlongDegrees = 360 / (Math.Pow(2, zoomLevel));
if (map.VisibleRegion != null)
{
    map.MoveToRegion(new MapSpan(map.VisibleRegion.Center, latlongDegrees, latlongDegrees));
}

이 예제 MoveToRegion 에서는 속성을 통해 Map.VisibleRegion 맵의 현재 위치를 지정하는 인수와 위도 및 경도의 각도로 확대/축소 수준을 지정하는 인수를 사용하여 메서드를 호출 MapSpan 합니다. 전체 결과는 지도의 확대/축소 수준이 변경되지만 위치는 변경되지 않습니다. 맵에서 확대/축소를 구현하는 다른 방법은 이 메서드를 MapSpan.WithZoom 사용하여 확대/축소 요소를 제어하는 것입니다.

Important

지도 UI를 통해 또는 프로그래밍 방식으로 맵을 확대하려면 속성true이 Map.HasZoomEnabled 필요합니다. 이 속성에 대한 자세한 내용은 확대/축소 사용 안 함을 참조 하세요.

지도 동작 사용자 지정

Map 일부 속성을 설정하고 이벤트를 처리하여 동작을 사용자 지정할 수 있습니다MapClicked.

참고 항목

지도 사용자 지정 렌더러를 만들어 추가 맵 동작 사용자 지정을 수행할 수 있습니다. 자세한 내용은 지도 사용자 지정을 Xamarin.Forms 참조하세요.

트래픽 데이터 표시

클래스는 Map 형식bool의 속성을 정의합니다TrafficEnabled. 기본적으로 이 속성은 false트래픽 데이터가 맵에 오버레이되지 않음을 나타냅니다. 이 속성을 설정 true하면 트래픽 데이터가 맵에 오버레이됩니다. 다음 예제에서는 이 속성을 설정하는 방법을 보여 있습니다.

<maps:Map TrafficEnabled="true" />

해당하는 C# 코드는 다음과 같습니다.

Map map = new Map
{
    TrafficEnabled = true
};

스크롤 사용 안 함

클래스는 Map 형식bool의 속성을 정의합니다HasScrollEnabled. 기본적으로 이 속성은 true맵을 스크롤할 수 있음을 나타냅니다. 이 속성을 설정 false하면 지도가 스크롤되지 않습니다. 다음 예제에서는 이 속성을 설정하는 방법을 보여 있습니다.

<maps:Map HasScrollEnabled="false" />

해당하는 C# 코드는 다음과 같습니다.

Map map = new Map
{
    HasScrollEnabled = false
};

확대/축소 사용 안 함

클래스는 Map 형식bool의 속성을 정의합니다HasZoomEnabled. 기본적으로 이 속성은 true지도에서 확대/축소를 수행할 수 있음을 나타냅니다. 이 속성을 설정 false하면 지도를 확대/축소할 수 없습니다. 다음 예제에서는 이 속성을 설정하는 방법을 보여 있습니다.

<maps:Map HasZoomEnabled="false" />

해당하는 C# 코드는 다음과 같습니다.

Map map = new Map
{
    HasZoomEnabled = false
};

사용자의 위치 표시

클래스는 Map 형식bool의 속성을 정의합니다IsShowingUser. 기본적으로 이 속성은 false맵에 사용자의 현재 위치가 표시되지 않음을 나타냅니다. 이 속성을 설정 true하면 맵에 사용자의 현재 위치가 표시됩니다. 다음 예제에서는 이 속성을 설정하는 방법을 보여 있습니다.

<maps:Map IsShowingUser="true" />

해당하는 C# 코드는 다음과 같습니다.

Map map = new Map
{
    IsShowingUser = true
};

Important

iOS, Android 및 유니버설 Windows 플랫폼 사용자의 위치에 액세스하려면 애플리케이션에 위치 권한이 부여되어야 합니다. 자세한 내용은 플랫폼 구성을 참조하세요.

레이아웃 변경 시 지도 영역 유지 관리

클래스는 Map 형식bool의 속성을 정의합니다MoveToLastRegionOnLayoutChange. 기본적으로 이 속성은 true표시된 지도 영역이 디바이스 회전과 같이 레이아웃 변경이 발생할 때 현재 지역에서 이전에 설정된 영역으로 이동한다는 것을 나타냅니다. 이 속성을 설정false하면 레이아웃 변경이 발생할 때 표시된 지도 영역이 다시 가운데에 기본. 다음 예제에서는 이 속성을 설정하는 방법을 보여 있습니다.

<maps:Map MoveToLastRegionOnLayoutChange="false" />

해당하는 C# 코드는 다음과 같습니다.

Map map = new Map
{
    MoveToLastRegionOnLayoutChange = false
};

맵 클릭

클래스는 Map 맵을 MapClicked 탭할 때 발생하는 이벤트를 정의합니다. MapClickedEventArgs 이벤트와 함께 제공되는 개체에는 형식Position의 단일 속성이 있습니다Position. 이벤트가 발생하면 Position 속성이 탭된 지도 위치로 설정됩니다. 구조체에 Position 대한 자세한 내용은 지도 위치 및 거리를 참조 하세요.

다음 코드 예제에서는 이벤트에 대한 MapClicked 이벤트 처리기를 보여줍니다.

void OnMapClicked(object sender, MapClickedEventArgs e)
{
    System.Diagnostics.Debug.WriteLine($"MapClick: {e.Position.Latitude}, {e.Position.Longitude}");
}

이 예제 OnMapClicked 에서 이벤트 처리기는 탭된 맵 위치를 나타내는 위도 및 경도를 출력합니다. 이벤트 처리기는 다음과 같이 이벤트에 등록 MapClicked 할 수 있습니다.

<maps:Map MapClicked="OnMapClicked" />

해당하는 C# 코드는 다음과 같습니다.

Map map = new Map();
map.MapClicked += OnMapClicked;

Xamarin.Forms 지도 컨트롤

지도 표시

맵 유형

지도에 특정 위치 표시

MapSpan 개체 만들기

맵 이동

맵 확대/축소

지도 동작 사용자 지정

트래픽 데이터 표시

스크롤 사용 안 함

확대/축소 사용 안 함

사용자의 위치 표시

레이아웃 변경 시 지도 영역 유지 관리

맵 클릭

관련 링크

추가 리소스