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.

Элемент управления map был использован в MapsSample пример, как показано ниже.The map control has been used in the MapsSample sample, which is shown below.

Карты в образце MobileCRMMaps 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 интерфейсы API, которые могут использоваться в общий проект библиотеки .NET Standard или общий проект кода.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:

Info.plist для iOS 8Info.plist for iOS 8

AndroidAndroid

Чтобы использовать v2 Google Maps API на устройстве 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 на Получение ключа Google Maps API v2.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.

Примечание

Обратите внимание, что, чтобы пакет APK для доступа к Google карты, необходимо включить отпечатки пальцев SHA-1 и упаковать имена для каждого хранилища ключей (отладочную и окончательную), которые используются для входа пакет APK.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. См. в разделе Получение ключа Google Maps API v2.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:

Разрешения, необходимые для AndroidRequired 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 удалил клиентская библиотека Apache HTTP из bootclasspath, и их не доступен для приложений, предназначенных для 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 файл, чтобы продолжать использовать клиент Apache HTTP в приложениях, предназначенных для API 28 или более поздней версии: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>

Универсальная платформа WindowsUniversal 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 .
  • New () 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));
};

Карты с zoomMaps 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 может быть присвоено одно из следующих значений, которые могут влиять на способ визуализации ПИН-код (в зависимости от платформы):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

С помощью XAMLUsing XAML

Maps также может быть размещен в макетах 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 свойство модели связанное представление, которое возвращает ObservableCollection из Location объекты, которые является пользовательским типом.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 и AndroidScreenshot of map with data bound pins, on iOS and Android