День двадцатый. Элемент Map

Вступление

Поговорим об элементе Map. В настоящее время геолокация стала важной и популярной темой для разработчиков и пользователей мобильных устройств. Действительно, это так интересно и удобно знать, где ты сейчас находишься и какие интересные объекты есть поблизости.

Используем элемент Map

Map является стандартным элементом, входящим в состав панели инструментов Visual Studio 2010. Поэтому вам нужно перетащить данный элемент на свою страницу. При этом в коде XAML появится следующее.


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

А также код для самого элемента:


<map:Map Height="607" HorizontalAlignment="Left" Name="myMap" VerticalAlignment="Top" Width="456" />

Запустим проект и посмотрим на результат.

Вы видите, что в центре экрана красуется белая надпись Invalid Credentials. Sign up for a developer account. Исправим ситуацию и получим специльный идентификатор для разработчика.

Получение учетной записи разработчика

Прежде чем приступать к разработке картографических приложений, использующих данные от Bing, вам необходимо получить специальный ключ Bing Maps API. Это совершенно бесплатно и занимает несколько минут. После получения нужного ключа у вас в приложении уже не будет этой противной белой надписи. Предположим, вы сделали все необходимые действия и вам осталось создать собственный ключ в специальной форме:

Ключ будет выглядеть приблизительно вот так (в данном примере используется вымышленный ключ, не копируйте его):


AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9

Используем Credentials Provider

Получив нужный API-ключ, вы можете использовать его в приложении:


 <map:Map CredentialsProvider="AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9">

Но если вы будете использовать данный ключ несколько раз, то лучше сохранить его в файле типа App.xaml. А потом получим его для нашей страницы

Напоминаю, после задания «CredentialsProvider» раздражающая белая надпись посреди карты должна исчезнуть.

Настройка карты

Вид карты можно настраивать по своему вкусу. Например, можно переключаться между различными режимами, показывать инструменты зума и так далее. Для знакомства с возможностями элемента изучите Bing Maps Silverlight Control Interactive SDK. Нет смысла рассказывать о всех возможностях (их слишком много), поэтому выберем одну тему - добавление пользовательских меток на карту (pushpin), а также добавление произвольных фигур.

Добавляем метки

Добавить метку очень просто. Создаем новый объект Pushpin, устанавливаем его координаты и добавляем на карту. Это был пример на C#. На XAML это сделать тоже можно. Выбор за вами.


[XAML]
<map:Map x:Name="MapControl" Center="55.7464, 37.6261" Mode="AerialWithLabels" 
              CredentialsProvider="здесьВашКлюч" ZoomLevel="7">
         <map:Pushpin Location="55.7579, 37.6288" FontSize="30" Background="Orange" Content="1" Opacity=".9" />
</map:Map>


[C#]
Pushpin pushpin = new Pushpin();
Location location = new Location();
location.Latitude = 40.1449;
location.Longitude = -82.9754;
pushpin.Location = location;
pushpin.Background = new SolidColorBrush(Colors.Orange);
pushpin.Content = "1";
pushpin.FontSize = 30;
MapControl.Children.Add(pushpin);

Для примера (код XAML) я указал координаты Политехнического музея в Москве для своей метки. Вот так будет выглядеть метка при уровне 7. Вы можете самостоятельно увеличить масштаб, чтобы увидеть поближе улицы Москвы.

Добавляем фигуры на карту

Также можно наносить на карту собственные фигуры при помощи MapPolygon. Вам нужно задать список координат и закрасить полученную фигуру выбранным цветом. Таким образом, вы можете закрасить страну, штат или город:


[XAML]
 <map:MapPolygon Fill="Purple" Stroke="White" Opacity=".7" Locations="40.1449,-82.9754 40.1449,-12.9754 10.1449,-82.9754" />


[C#]
MapPolygon mapPolygon = new MapPolygon();
mapPolygon.Fill = new SolidColorBrush(Colors.Purple);
mapPolygon.Stroke = new SolidColorBrush(Colors.White);
mapPolygon.Opacity = .7;
LocationCollection locations = new LocationCollection();
Location location = new Location();
location.Latitude = 40.1449;
location.Longitude = -82.9754;
Location location1 = new Location();
location1.Latitude = 40.1449;
location1.Longitude = -12.9754;
Location location2 = new Location();
location1.Latitude = 10.1449;
location1.Longitude = -82.9754;
locations.Add(location);
locations.Add(location1);
locations.Add(location2);
mapPolygon.Locations = locations;

MapControl.Children.Add(mapPolygon);

В данном случае мы добавили многоугольник, закрашенный цветом Purple.

Реклама