Xamarin.Forms 맵Xamarin.Forms Map

샘플 다운로드 샘플 다운로드Download Sample Download the sample

Xamarin.Forms는 각 플랫폼에서 기본 지도 Api를 사용합니다.Xamarin.Forms uses the native map APIs on each platform.

Xamarin.Forms.Maps 각 플랫폼에 기본 지도 Api를 사용합니다.Xamarin.Forms.Maps uses the native map APIs on each platform. 이 사용자에 대 한 지도 신속 하 고 친숙 한 환경을 제공 하지만 각 플랫폼 API 요구 사항을 준수 하려면 몇 가지 구성 단계가 필요 함을 의미 합니다.This provides a fast, familiar maps experience for users, but means that some configuration steps are needed to adhere to each platforms API requirements. 한 번 구성 하면는 Map 공용 코드의 다른 모든 Xamarin.Forms 요소 처럼 작동을 제어 합니다.Once configured, the Map control works just like any other Xamarin.Forms element in common code.

지도 컨트롤에서 사용 된 합니다 MapsSample 아래 나와 있는 샘플입니다.The map control has been used in the MapsSample sample, which is shown below.

MobileCRM 예제의 mapsMaps in the MobileCRM sample

맵 기능을 만들어 더 향상 시킬 수 있습니다는 사용자 지정 렌더러를 매핑할합니다.Map functionality can be further enhanced by creating a map custom renderer.

맵 초기화Maps initialization

Xamarin.Forms 응용 프로그램에 맵을 추가 하는 경우 Xamarin.Forms.Maps 솔루션의 모든 프로젝트에 추가 해야 하는 별도 NuGet 패키지입니다.When adding maps to a Xamarin.Forms application, Xamarin.Forms.Maps is a separate NuGet package that you should add to every project in the solution. Android에서이 또한에 종속이 되어 GooglePlayServices (다른 NuGet) Xamarin.Forms.Maps를 추가 하면 자동으로 다운로드 됩니다.On Android, this also has a dependency on GooglePlayServices (another NuGet) which is downloaded automatically when you add Xamarin.Forms.Maps.

NuGet 패키지를 설치한 후 초기화 코드를 각 응용 프로그램 프로젝트에서 필요 한 후Xamarin.Forms.Forms.Init 메서드 호출 합니다.After installing the NuGet package, some initialization code is required in each application project, after the Xamarin.Forms.Forms.Init method call. IOS에 대 한 다음 코드를 사용 합니다.For iOS use the following code:

Xamarin.FormsMaps.Init();

Android에서 동일한 매개 변수를 전달 해야 Forms.Init:On Android you must pass the same parameters as Forms.Init:

Xamarin.FormsMaps.Init(this, bundle);

다음 코드를 사용 하는 유니버설 Windows 플랫폼 (UWP)에 대 한 합니다.For the Universal Windows Platform (UWP) use the following code:

Xamarin.FormsMaps.Init("INSERT_AUTHENTICATION_TOKEN_HERE");

각 플랫폼에 대해 다음 파일에이 호출을 추가 합니다.Add this call in the following files for each platform:

  • iOS -AppDelegate.cs 파일을 FinishedLaunching 메서드.iOS - AppDelegate.cs file, in the FinishedLaunching method.
  • Android -MainActivity.cs 파일은 OnCreate 메서드.Android - MainActivity.cs file, in the OnCreate method.
  • UWP -MainPage.xaml.cs 파일을 MainPage 생성자입니다.UWP - MainPage.xaml.cs file, in the MainPage constructor.

NuGet 패키지를 추가 하 고 각 응용 프로그램 내에서 초기화 메서드 호출 되 면 Xamarin.Forms.Maps 일반적인.NET Standard 라이브러리 프로젝트 또는 공유 프로젝트 코드에서 Api를 사용할 수 있습니다.Once the NuGet package has been added and the initialization method called inside each application, Xamarin.Forms.Maps APIs can be used in the common .NET Standard library project or Shared Project code.

플랫폼 구성Platform configuration

지도 표시 되기 전에 일부 플랫폼에서 추가 구성 단계가 필요 합니다.Additional configuration steps are required on some platforms before the map will display.

iOSiOS

에 다음 키를 설정 해야 하는 iOS에서 위치 서비스에 액세스 하려면 Info.plist:To access location services on iOS, you must set the following keys in Info.plist:

IOS 11 및 이전 버전을 지원 하려면 모든 세 개의 키를 포함할 수 있습니다: NSLocationWhenInUseUsageDescription, NSLocationAlwaysAndWhenInUseUsageDescription, 및 NSLocationAlwaysUsageDescription합니다.To support iOS 11 and earlier, you can include all three keys: NSLocationWhenInUseUsageDescription, NSLocationAlwaysAndWhenInUseUsageDescription, and NSLocationAlwaysUsageDescription.

이러한 키에 대 한 XML 표현을 Info.plist 아래에 표시 됩니다.The XML representation for these keys in Info.plist is shown below. 업데이트 해야 합니다 string 응용 프로그램 위치 정보를 사용 하는 방식을 반영 하도록 값:You should update the string values to reflect how your application is using the location information:

<key>NSLocationAlwaysUsageDescription</key>
<string>Can we use your location at all times?</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Can we use your location when your app is being used?</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Can we use your location at all times?</string>

합니다 Info.plist 항목에 추가할 수도 있습니다 원본 편집 하는 동안 보기의 Info.plist 파일:The Info.plist entries can also be added in Source view while editing the Info.plist file:

Ios 8 Info.plistInfo.plist for iOS 8

AndroidAndroid

사용 하는 Google Maps API v2 Android에서 API 키를 생성 한 Android 프로젝트에 추가 해야 합니다.To use the Google Maps API v2 on Android you must generate an API key and add it to your Android project. Xamarin 문서에서 지침에 따라 v2 Google Maps API 키를 가져오는합니다.Follow the instructions in the Xamarin doc on obtaining a Google Maps API v2 key. 이러한 지침에서는 뒤에 있는 API 키를 붙여 넣습니다. 합니다 Properties/AndroidManifest.xml 파일 (소스 보기 및 다음 요소 찾기/업데이트):After following those instructions, paste the API key in the Properties/AndroidManifest.xml file (view source and find/update the following element):

<application ...>
    <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="YOUR_API_KEY" />
</application>

올바른 API 키가 없는 지도 컨트롤은 Android에서 회색 상자로 표시 됩니다.Without a valid API key the maps control will display as a gray box on Android.

참고

Google Maps에 액세스할 APK에 대 한 순서로 sha-1 지문 포함 하며 APK에 서명 하는 데 사용 하는 모든 keystore (디버그 및 릴리스)에 대 한 이름을 패키지 note 합니다.Note that, in order for your APK to access Google Maps, you must include SHA-1 fingerprints and package names for every keystore (debug and release) that you use to sign your APK. 예를 들어, 디버그 및 릴리스 APK를 생성 하기 위한 다른 컴퓨터에 대 한 컴퓨터를 사용 하는 경우 포함 해야 첫 번째 컴퓨터의 디버그 키 저장소에서 sha-1 인증서 지문 및의 릴리스 키 저장소에서 sha-1 인증서 지문 두 번째 컴퓨터입니다.For example, if you use one computer for debug and another computer for generating the release APK, you should include the SHA-1 certificate fingerprint from the debug keystore of the first computer and the SHA-1 certificate fingerprint from the release keystore of the second computer. 또한 경우 키 자격 증명을 편집 해야 앱의 패키지 이름을 변경 합니다.Also remember to edit the key credentials if the app's Package Name changes. 참조 v2 Google Maps API 키를 가져오는합니다.See obtaining a Google Maps API v2 key.

Android 프로젝트를 마우스 오른쪽 단추로 클릭 하 고 선택 하 여 적절 한 권한을 사용 하도록 설정 해야 옵션 > 빌드 > Android 응용 프로그램 다음 타이머에서 틱 및:You'll also need to enable appropriate permissions by right-clicking on the Android project and selecting Options > Build > Android Application and ticking the following:

  • AccessCoarseLocation
  • AccessFineLocation
  • AccessLocationExtraCommands
  • AccessMockLocation
  • AccessNetworkState
  • AccessWifiState
  • Internet

그 중 일부는 아래 스크린샷에 표시 됩니다.Some of these are shown in the screenshot below:

Android에 필요한 권한Required permissions for Android

마지막 두는 응용 프로그램 맵 데이터를 다운로드 하려면 네트워크 연결이 필요 하기 때문에 필요 합니다.The last two are required because applications require a network connection to download map data. Android에 대해 알아보세요 권한을 에 대해 자세히 알아보세요.Read about Android permissions to learn more.

또한 Android 9가 bootclasspath에서 Apache HTTP 클라이언트 라이브러리를 제거 및 이므로 이상의 API 28를 대상으로 하는 응용 프로그램에 사용할 수 없습니다.In addition, Android 9 has removed the Apache HTTP client library from the bootclasspath, and so it isn't available to applications that target API 28 or higher. 에 다음 줄을 추가 해야 합니다 application 노드의 하 AndroidManifest.xml 28 이상 API를 대상으로 하는 응용 프로그램에서 Apache HTTP 클라이언트를 사용 하 여 계속 하려면 파일:The following line must be added to the application node of your AndroidManifest.xml file to continue using the Apache HTTP client in applications that target API 28 or higher:

<application ...>
    ...
    <uses-library android:name="org.apache.http.legacy" android:required="false" />    
</application>

UWPUniversal Windows Platform

유니버설 Windows 플랫폼에서 지도 사용 하 여 권한 부여 토큰을 생성 해야 합니다.To use maps on the Universal Windows Platform you must generate an authorization token. 자세한 내용은 지도 인증 키를 요청 MSDN에서.For more information, see Request a maps authentication key on MSDN.

인증 토큰을 다음으로 지정 해야 합니다 FormsMaps.Init("AUTHORIZATION_TOKEN") 메서드 호출에서 Bing Maps를 사용 하 여 앱을 인증 합니다.The authentication token should then be specified in the FormsMaps.Init("AUTHORIZATION_TOKEN") method call, to authenticate the app with Bing Maps.

맵을 사용 하 여Using maps

참조 된 MapPage.cs MobileCRM 샘플 코드의 맵 컨트롤을 사용할 수 있는 방법을의 예입니다.See the MapPage.cs in the MobileCRM sample for an example of how the map control can be used in code. 간단한 MapPage 클래스-이 알림은 다음과 같을 수 있습니다 하는 새 MapSpan 지도의 보기를 배치 하기 위해 만들어집니다.A simple MapPage class might look like this - notice that a new MapSpan is created to position the map's view:

public class MapPage : ContentPage {
    public MapPage() {
        var map = new Map(
            MapSpan.FromCenterAndRadius(
                    new Position(37,-122), Distance.FromMiles(0.3))) {
                IsShowingUser = true,
                HeightRequest = 100,
                WidthRequest = 960,
                VerticalOptions = LayoutOptions.FillAndExpand
            };
        var stack = new StackLayout { Spacing = 0 };
        stack.Children.Add(map);
        Content = stack;
    }
}

맵 유형Map type

맵 내용을 설정 하 여 변경할 수도 있습니다는 MapType 일반 거리 맵 (기본값), 위성 이미지 또는 둘의 조합을 표시할 속성입니다.The map content can also be changed by setting the MapType property, to show a regular street map (the default), satellite imagery or a combination of both.

map.MapType == MapType.Street;

유효한 MapType 값은:Valid MapType values are:

  • 하이브리드Hybrid
  • 위성Satellite
  • 주소 (기본값)Street (the default)

지도 영역 및 MapSpanMap region and MapSpan

위의 코드 조각에서와 같이 제공을 MapSpan 초기 보기를 설정 하는 맵 생성자에는 인스턴스 (중심점 및 확대/축소 수준) 로드 되는 경우 맵의 합니다.As shown in the code snippet above, supplying a MapSpan instance to a map constructor sets the initial view (center point and zoom level) of the map when it is loaded. MoveToRegion 지도의 위치 또는 확대/축소 수준을 변경 하려면 다음 map 클래스에서 메서드를 사용할 수 있습니다.The MoveToRegion method on the map class can then be used to change the position or zoom level of the map. 두 가지 방법으로 새 MapSpan 인스턴스:There are two ways to create a new MapSpan instance:

  • MapSpan.FromCenterAndRadius() -의 범위를 만드는 정적 메서드를를 Position 지정 하는 Distance 합니다.MapSpan.FromCenterAndRadius() - static method to create a span from a Position and specifying a Distance .
  • 새 MapSpan () -사용 하는 생성자를 Position 위도 및 경도 표시할 각도입니다.new MapSpan () - constructor that uses a Position and the degrees of latitude and longitude to display.

위치를 변경 하지 않고 지도의 확대/축소 수준을 변경 하려면 새로 만듭니다 MapSpan 에서 현재 위치를 사용 하는 VisibleRegion.Center 지도 컨트롤의 속성입니다.To change the zoom level of the map without altering the location, create a new MapSpan using the current location from the VisibleRegion.Center property of the map control. 하지만 Slider (지도 컨트롤에서 직접 확대/축소 슬라이더의 값을 현재 업데이트할 수 없습니다) 다음과 같은 지도 확대/축소를 제어 하는데 사용할 수 없습니다.A Slider could be used to control map zoom like this (however zooming directly in the map control cannot currently update the value of the slider):

var slider = new Slider (1, 18, 1);
slider.ValueChanged += (sender, e) => {
    var zoomLevel = e.NewValue; // between 1 and 18
    var latlongdegrees = 360 / (Math.Pow(2, zoomLevel));
    map.MoveToRegion(new MapSpan (map.VisibleRegion.Center, latlongdegrees, latlongdegrees));
};

확대/축소를 사용 하 여 mapsMaps with zoom

지도 핀Map pins

위치를 사용 하 여 지도에 표시할 수 있습니다 Pin 개체입니다.Locations can be marked on the map with Pin objects.

var position = new Position(37,-122); // Latitude, Longitude
var pin = new Pin {
            Type = PinType.Place,
            Position = position,
            Label = "custom pin",
            Address = "custom detail info"
        };
map.Pins.Add(pin);

PinType pin (플랫폼)에 따라 렌더링 되는 방식을 영향을 줄 수 있는 다음 값 중 하나로 설정할 수 있습니다.PinType can be set to one of the following values, which may affect the way the pin is rendered (depending on the platform):

  • 제네릭Generic
  • 현재 위치Place
  • SavedPinSavedPin
  • SearchResultSearchResult

XAML을 사용 하 여Using XAML

맵이 코드이 조각에서와 같이 XAML 레이아웃에 배치 될 수도 합니다.Maps can also be positioned in XAML layouts as shown in this snippet.

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             x:Class="MapDemo.MapPage">
    <StackLayout VerticalOptions="StartAndExpand" Padding="30">
        <maps:Map WidthRequest="320" HeightRequest="200"
                  x:Name="MyMap"
                  IsShowingUser="true"
                  MapType="Hybrid" />
    </StackLayout>
</ContentPage>

참고

추가 xmlns Xamarin.Forms.Maps 컨트롤 참조를 네임 스페이스 정의가 필요 합니다.An additional xmlns namespace definition is required to reference the Xamarin.Forms.Maps controls.

합니다 MapRegion 하 고 Pins 사용 하 여 코드에서 설정할 수 있습니다는 MyMap 참조 (또는 맵의 이름이 무엇이 든).The MapRegion and Pins can be set in code using the MyMap reference (or whatever the map is named).

MyMap.MoveToRegion(
    MapSpan.FromCenterAndRadius(
        new Position(37,-122), Distance.FromMiles(1)));

지도 데이터 바인딩을 사용 하 여 데이터로 채우기Populating a Map with data using data binding

합니다 Map 클래스에는 다음 속성을 노출 합니다.The Map class also exposes the following properties:

  • ItemsSource -컬렉션을 지정 IEnumerable 항목을 표시할 수 있습니다.ItemsSource – specifies the collection of IEnumerable items to be displayed.
  • ItemTemplate – 지정 된 DataTemplate 표시 되는 항목의 컬렉션에 있는 각 항목에 적용 하 합니다.ItemTemplate – specifies the DataTemplate to apply to each item in the collection of displayed items.

따라서 한 Map 바인딩할 데이터 바인딩을 사용 하 여 데이터로 채울 수 있습니다 해당 ItemsSource 속성을는 IEnumerable 컬렉션:Therefore, a Map can be populated with data by using data binding to bind its ItemsSource property to an IEnumerable collection:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             x:Class="WorkingWithMaps.PinItemsSourcePage">
    <Grid>
        ...
        <maps:Map x:Name="map"
                  ItemsSource="{Binding Locations}">
            <maps:Map.ItemTemplate>
                <DataTemplate>
                    <maps:Pin Position="{Binding Position}"
                              Address="{Binding Address}"
                              Label="{Binding Description}" />
                </DataTemplate>
            </maps:Map.ItemTemplate>
        </maps:Map>
        ...
    </Grid>
</ContentPage>

ItemsSource 속성 데이터를 바인딩합니다를 Locations 반환 하는 연결 된 뷰 모델의 속성을 ObservableCollectionLocation 사용자 지정 형식인 개체입니다.The ItemsSource property data binds to the Locations property of the connected view model, which returns an ObservableCollection of Location objects, which is a custom type. Location 개체를 정의 Address 하 고 Description 형식의 속성을 string, 및 Position 형식의 속성 Position 합니다.Each Location object defines Address and Description properties, of type string, and a Position property, of type Position.

각 항목의 모양을 합니다 IEnumerable 컬렉션이 설정 하 여 정의 된를 ItemTemplate 속성을을 DataTemplate 포함 하는 Pin 데이터 바인딩할 개체 적절 한 속성입니다.The appearance of each item in the IEnumerable collection is defined by setting the ItemTemplate property to a DataTemplate that contains a Pin object that data binds to appropriate properties.

다음 스크린샷에서 표시 된 Map 표시를 Pin 데이터 바인딩을 사용 하 여 컬렉션:The following screenshots show a Map displaying a Pin collection using data binding:

스크린샷 지도에 데이터 바인딩된 iOS 및 Android에서 핀Screenshot of map with data bound pins, on iOS and Android