Lompat ke konten Lompat ke sidebar Lompat ke footer

Menampilkan Lokasi Device di Map di Windows Phone

Assalamualaikum semua, setelah kemarin saya memposting tentang Menampilkan Map Berdasarkan Latitude dan Longitude.
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

Menampilkan Lokasi Device di Map di Windows Phone

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

Sekian pembahasan tentang Menampilkan Lokasi Device di Map di Windows Phone
Tunggu tutorial menarik lainnya, karena itu kunjungi terus blog ini

Posting Komentar untuk "Menampilkan Lokasi Device di Map di Windows Phone"