Добавление геолокации и карт в приложения для Windows Phone

Запустите приложение и нажмите кнопку « Получить местоположение» на панели команд. Через пару секунд, в зависимости от вашей сети, появится сообщение с вашим местоположением.

Изменить центр карты и уровень масштабирования

Для нашего случая использования карта должна показывать определенное местоположение или, по крайней мере, фокусироваться на определенной области. Давайте использовать местоположение пользователя, которое мы получили на предыдущем шаге, в качестве центра карты. Для этого я добавил следующий метод в класс MainPage .

 private void CenterMap(double lat, double lon) { MyMap.Center = new Geopoint(new BasicGeoposition() { Latitude = lat, Longitude = lon }); } 

Возможно, вы заметили, что карта пока показывает континенты. Если вы хотите увеличить масштаб до определенной страны или города, вы можете сделать это всего одной строкой кода. Но разные устройства имеют разные размеры экрана, и масштаб может быть не на должном уровне, или что, если пользователь хочет уменьшить? Хорошим подходом является добавление ползунка, чтобы пользователь мог контролировать уровень масштабирования. Сначала мы добавляем элемент управления в MainPage.xaml прямо под тегом map.

 <Slider x:Name="slider" VerticalAlignment="Bottom" Margin="15,0" LargeChange="1" Maximum="20" Minimum="1" SmallChange="1" ValueChanged="slider_ValueChanged"/> 

Слайдер может иметь целочисленные значения от 1 до 20. Чтобы перехватить событие ValueChanged, мы используем следующий метод, добавленный в MainPage.cs .

 private void slider_ValueChanged(object sender, Windows.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e) { if (slider != null) MyMap.ZoomLevel = (int)slider.Value; } 

Осталось только обновить метод GetLocation() который у нас уже есть. Изменения вносятся в блок try.

 try { Geoposition gp = await gl.GetGeopositionAsync( maximumAge:TimeSpan.FromMinutes(1), timeout:TimeSpan.FromSeconds(20)); //message("Lat: " + gp.Coordinate.Latitude + //"\n Lon: " + gp.Coordinate.Longitude, "Coordinates"); CenterMap(gp.Coordinate.Point.Position.Latitude, gp.Coordinate.Point.Position.Longitude); MyMap.ZoomLevel = (int)slider.Value; } - try { Geoposition gp = await gl.GetGeopositionAsync( maximumAge:TimeSpan.FromMinutes(1), timeout:TimeSpan.FromSeconds(20)); //message("Lat: " + gp.Coordinate.Latitude + //"\n Lon: " + gp.Coordinate.Longitude, "Coordinates"); CenterMap(gp.Coordinate.Point.Position.Latitude, gp.Coordinate.Point.Position.Longitude); MyMap.ZoomLevel = (int)slider.Value; } 

Результат на скриншоте ниже. Пользователь может запросить их местоположение и увеличить или уменьшить масштаб.

Добавление кнопок

Последнее, что я расскажу — это кнопки. Это хороший способ сделать точки заметными на карте.

Я добавил AppBarToggleButton чтобы показать AppBarToggleButton представляющую местоположение пользователя на карте. Теперь CommandBar выглядит так:

 <Page.BottomAppBar> <CommandBar> <AppBarButton Icon="Target" Label="Get Location" Click="AppBarButton_Click"/> <AppBarToggleButton x:Name="PushPinToggle" Icon="MapPin" Label="Toggle Pushpin" Checked="AppBarToggleButton_Checked" IsChecked="False" Unchecked="AppBarToggleButton_Unchecked"/> </CommandBar> </Page.BottomAppBar> 

События check / uncheck обрабатываются двумя методами, которые добавляют или удаляют метку из дочерних элементов карты.

 private void AppBarToggleButton_Checked(object sender, Windows.UI.Xaml.RoutedEventArgs e) { AddPushpin(MyMap.Center.Position.Latitude, MyMap.Center.Position.Longitude, Colors.Blue); } private void AppBarToggleButton_Unchecked(object sender, Windows.UI.Xaml.RoutedEventArgs e) { MyMap.Children.Clear(); } 

Работа здесь происходит в методе AddPushpin , который имеет три параметра: широту и долготу местоположения и цвет кнопки, который является необязательным.

 public void AddPushpin(double lat, double lon, Color c) { BasicGeoposition location = new BasicGeoposition(); location.Latitude = lat; location.Longitude = lon; var pin = new Ellipse() { Fill = new SolidColorBrush(c), Stroke = new SolidColorBrush(Colors.White), StrokeThickness = 1, Width = 40, Height = 40, }; pin.Tapped += pin_Tapped; Windows.UI.Xaml.Controls.Maps.MapControl.SetLocation(pin, new Geopoint(location)); MyMap.Children.Add(pin); } void pin_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e) { message("This is your location.", ""); } 

В моем случае канцелярская кнопка — это эллипс. Вы можете установить различные свойства, такие как размер, цвет, границы и т. Д. Я также добавил EventHandler когда пользователь нажимает на пин-код. Вы можете отобразить больше информации об этом месте с помощью DialogMessage как мы делали ранее.

Осталось только MapControl этому MapControl географическое местоположение, иначе это будет эллипс, нарисованный над MapControl . Увеличение и уменьшение или перемещение вокруг не изменят положение булавки.

Теперь, когда все MapControl , добавьте свою MapControl дочерние MapControl и запустите приложение в последний раз.

Вывод

В этом уроке мы создали приложение, содержащее карту, которая может использоваться для нескольких целей. Мы узнали, как добавить эту карту и требования к ней для работы. Мы получили местоположение устройства и изменили центр карты на основе результата. Мы научились добавлять кнопки в определенное место и давать дополнительную информацию при нажатии.

Конечно, есть и другие приложения для карт, и я надеюсь, что это был хороший пример, чтобы заложить основы.

Спасибо за уделенное время. Пусть код будет с вами!