Pada malam hari ini saya ingin membahas tentang Menampilkan Lokasi Device di Map di Windows Phone, pertama-tama kita perlu mendapatkan koordinat dari device kita, lalu kita menambahkan sebuah pushpin ke map berdasarkan koordinat dari device kita.
oke langsung saja
Langkah - Langkah Menampilkan Lokasi Device di Map di Windows Phone
1. Buat sebuah Windows Phone App project baru
2. Tambahkan references Windows Phone Toolkit dengan cara klik kanan references > Manage Nuget Packages > cari Windows Phone Toolkit > Install
3. Tambahkan 1 button, 1 map dan 4 textblock, atau anda dapat mengcopykan script dibawah ini ke dalam file .xaml anda
<!--LayoutRoot is the root grid where all page content is placed--> <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!--TitlePanel contains the name of the application and page title--> <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock Text="Tutorial Koding" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/> <TextBlock Text="Lokasi Device" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel> <!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <maps:Map x:Name="map" HorizontalAlignment="Left" VerticalAlignment="Top" Height="438" Width="446"/> <Button x:Name="btn_temukan" Content="Temukan Lokasi Device" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,525,0,0" Width="446" Click="btn_temukan_Click"/> <TextBlock x:Name="txt_latitude" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="133,448,0,0"/> <TextBlock x:Name="txt_longitude" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="133,488,0,0"/> <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Longitude :" VerticalAlignment="Top" Margin="10,488,0,0"/> <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Latitude :" VerticalAlignment="Top" Margin="10,443,0,0"/> </Grid> </Grid>maka tampilannya kan seperti gambar dibawah ini
4. Buka Capabilities pada file WMAppManifest.xml centang ID_CAP_MAP dan ID_CAP_LOCATION
5. Import 4 namespace dibawah ini pada file .xaml anda
using System.Threading.Tasks; using Windows.Devices.Geolocation; using Microsoft.Phone.Maps.Toolkit; using Microsoft.Phone.Maps.Controls; using System.Windows.Media;
6. Tambahkan script dibawah ini pada event btn_temukan_Click
private async void btn_temukan_Click(object sender, RoutedEventArgs e) { Geolocator geolocator = new Geolocator(); geolocator.DesiredAccuracyInMeters = 50; try { Geoposition geoposition = await geolocator.GetGeopositionAsync( maximumAge: TimeSpan.FromMinutes(5), timeout: TimeSpan.FromSeconds(10) ); // Windows Phone 8.1 //Geoposition position = await geolocator.GetGeopositionAsync(); //txt_latitude.Text = position.Coordinate.Point.Position.Latitude.ToString(); //txt_longitude.Text = position.Coordinate.Point.Position.Longitude.ToString(); double latitude = geoposition.Coordinate.Latitude; double longitude = geoposition.Coordinate.Longitude; txt_latitude.Text = latitude.ToString(); txt_longitude.Text = longitude.ToString(); // menandai map Pushpin pushpin = new Pushpin(); pushpin.Content = "Lokasi Saya"; pushpin.Background = new SolidColorBrush(Colors.Blue); // Menambahkan pushpin ke MapOverlay MapOverlay overlay = new MapOverlay(); overlay.Content = pushpin; overlay.GeoCoordinate = new System.Device.Location.GeoCoordinate(latitude, longitude); overlay.PositionOrigin = new Point(0, 0.5); // menyesuaikan koorinate MapOverlay MapLayer layer = new MapLayer(); layer.Add(overlay); // Menambahkan MapLayer ke map map.Layers.Add(layer); // Mengatur posisi tengah map map.Center = new System.Device.Location.GeoCoordinate(latitude, longitude); map.ZoomLevel = 14; } catch (Exception ex) { MessageBox.Show(ex.Message); } }
5. Jalankan program tersebut dengan menekan F5 lalu tekan tombol Temukan Lokasi Device maka akan seperti gambar dibawah ini
Anda bisa mendownload source codenya disini
dan untuk passwordnya disini
Sekian pembahasan tentang Menampilkan Lokasi Device di Map di Windows Phone
Tunggu tutorial menarik lainnya, karena itu kunjungi terus blog ini