ASP.NET ile Google Map Uygulaması

Batuhan Düzgün tarafından yayınlanmıştır 29. September 2010 19:24
  
Herkese merhaba arkadaşlar bu yazımda sizlere ASP.NET ile Google Map' e dair uygulamalar göstereceğim.Yapacağımız uygulamada Google Map üzerinde belirli noktalar arasında yön çizgileri çizdireceğim.Noktalarımızı tutacak olan MS Access 2007 veritabanımız olacak.Bu veritabanımızdaki noktaları Google Map için kullanacağız.
 
İlk iş olarak noktaları tutacak olan tablomuzu tasarlayalım.MS Access 2007 programını açıp,aşağıda tasarımı verilmiş tabloyu oluşturuyoruz.
 
 
 
Oluştuduğumuz veritabanımızı,açacağımız projenin "bin" klasörü içine kopyalıyoruz.Tabi bundan önce bir ASP.NET projesi açmamız gerekli.
 
Visual Studio'dan File>>New>>Website yolunu izleyerek bir websitesi uygulaması açıyoruz.Dikkat edin eğerki C# ile yazacaksanız aşağı kısımdaki dil seçeneğinden C# 'ı seçiniz.
 
Şimdi de projemize ait kodları yazmaya başlayalım.Öncelikle ilgili başlık dosyalarını eklememiz lazım.Ardından global değişkenleri tanımlayacağız. Kodlarımız aşağıdaki gibidir.
 

usingSystem.Data.OleDb;

 

private int SatirSayisi=0;

private double[,] NoktalarMatrisi;

private OleDbConnection Baglanti;

private OleDbCommand Komut;
 
Yukarıdaki global değişkenlerimizden "NoktalarMatrisi" noktaları tutacak olan matrisimizdir."SatirSayisi" ise  veritabanında kaç adet kayıt satırı olduğunu tutacaktır.
 
Hemen ardından veritabanımızdan verileri çekecek olan metodu yazıyoruz.Aşağıda kodları verilen metod hem kaç adet kayıt satırı olduğunu hem de noktaları çekecek.
 

public void GetPointsFromDatabase()

{

        try

        {

            stringBaglantiCumlesi = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=C:\\Users\\PC\\Documents\\Visual Studio2008\\WebSites\\TezGoogle\\App_Data\\KordinatlarVeriTabani.accdb; PersistSecurity Info=False;";

            Baglanti = newOleDbConnection(BaglantiCumlesi);

            Baglanti.Open();

            Komut = newOleDbCommand("SELECTCOUNT(*) FROM Kordinatlar", Baglanti);

            OleDbDataReaderOkuyucu = Komut.ExecuteReader();

            Okuyucu.Read();

            SatirSayisi=(int)Okuyucu.GetValue(0);

            Okuyucu.Close();

            NoktalarMatrisi = new double[SatirSayisi,2];

            /////////////////////////////////////////////

            Komut.CommandText="SELECT X,Y FROM Kordinatlar";

            OleDbDataReaderOkuyucu2=Komut.ExecuteReader();

            inti = 0;

            while(Okuyucu2.Read())

            {

                NoktalarMatrisi[i, 0] = Convert.ToDouble(Okuyucu2.GetValue(0).ToString());

                NoktalarMatrisi[i, 1] = Convert.ToDouble(Okuyucu2.GetValue(1).ToString());

                i++;

            }

            Okuyucu2.Close();

            Baglanti.Close();

        }

        catch

        {

            throw;

        }

    } 
 
Yukarıdaki işlemler klasik veritabanı işlemlerimiz.İlk önce COUNT ifadesiyle kaç adet satır olduğunu buluyoruz.Bunun ardından tablodan ilgili kayıtları okuyup,noktaları tutacak olan matrisi dolduruyoruz.
 
Google Map ile işlemler yapmamızı sağlayacak olan bileşenleri projeye dahil etme zamanı geldi.Aşağıda kırmızı kutular içine alınmış alanlar projenize dahil edilmesi gereken bileşenler.Bunları projenizin bulunduğu klasöre kopyala-yapıştır ile dahil edebilirsiniz. App_Code klasörüne ait dosyaları bu klasör altına kopyalamayı unutmayınız.
 
 
 
 
Bileşenler proje dahil edildikten sonra. "Default.aspx"  içine bir takım değişiklikler yapacağız.Aşağıdaki kodlara benzer bir kod sayfanızın olması gerekmektedir.
 
Default.aspx Sayfası ... 
 

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA3lJ6auW4Fmh-oVG_dtMJ6xRSwx6AEvwHLP2s283omk4dRIjT0hQq9UZqvjX58eVs6CcaLBkP8abFHg"

 

      type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

    <div>

      <uc1:GoogleMapForASPNet ID="GoogleMapForASPNet1" runat="server"/>

    </div>

    </form>

</body>

</html>
 
Yukarıdaki kodda önemli olanlar ScriptManager1 bileşeni ve GoogleMapForASPNET1  bileşeni bunlar sayesinde Google Map'i kullanacağız.
 
Bu işlemlerden sonra  "Default.aspx.cs"   sayfasına gelip sayfanın yüklendiği metod içine aşağıdaki kodları yazalım.
 

protected void Page_Load(objectsender, EventArgs e)

    {

        GetPointsFromDatabase();

       GoogleMapForASPNet1.GoogleMapObject.APIKey = "ABQIAAAA3lJ6auW4Fmh-oVG_dtMJ6xRSwx6AEvwHLP2s283omk4dRIjT0hQq9UZqvjX58eVs6CcaLBkP8abFHg";

       GoogleMapForASPNet1.GoogleMapObject.Width = "800px";

       GoogleMapForASPNet1.GoogleMapObject.Height = "500px";

       GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;

       GoogleMapForASPNet1.GoogleMapObject.APIVersion = "2";

       

        GooglePolylineCokluNoktalarDuzlemi = new GooglePolyline();

        CokluNoktalarDuzlemi.Width = 3;

        CokluNoktalarDuzlemi.ColorCode = "Red";

 

        GooglePointGoogleNoktasi;

 

        for (int i = 0; i < SatirSayisi; i++)

        {

            GoogleNoktasi = new GooglePoint(i.ToString(),NoktalarMatrisi[i,0],NoktalarMatrisi[i,1]);

            GoogleMapForASPNet1.GoogleMapObject.Points.Add(GoogleNoktasi);

           CokluNoktalarDuzlemi.Points.Add(GoogleNoktasi);

        }

 

       GoogleMapForASPNet1.GoogleMapObject.Polylines.Add(CokluNoktalarDuzlemi);

    } 
 
Şimdi yazdığımız koddan bahsedelim.Tarayıcıda haritayı görüntelemeye yarayacak olan bileşen GoogleMapObject olacaktır.Burada Google'dan aldığımız APIKEY 'değeri önemli bunu giriyoruz,ek olarak versiyon numarasını giriyoruz. "Width" ve "Height" özelliğiyle birlikte boyut ayarlaması yapıyoruz.Ardından veritabanından aldığımız noktaları Google Map üzerinde göstermek ve bu noktalar arasına çizgiler çizdirme işlemini yapacağız.Çizgileri çizdirmek için "GooglePolyLine" sınıfını kullanacağız.Bu çizdirme ve noktaları belirtme işlemini bir döngü ile yapıyoruz.Ardından çizdirdiğimiz nesneyi döngüden sonraki satır ile harita üzerine ekliyoruz.
 
Aşağıda da noktalarımızı tutacak olan matrisi veritabanından gelen bilgilerle doldurma işlemini yapan kodlar gözükmektedir.
 

public void GetPointsFromDatabase()

    {

        try

        {

            stringBaglantiCumlesi = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=C:\\Users\\PC\\Documents\\Visual Studio2008\\WebSites\\TezGoogle\\App_Data\\KordinatlarVeriTabani.accdb; PersistSecurity Info=False;";

            Baglanti = newOleDbConnection(BaglantiCumlesi);

            Baglanti.Open();

            Komut = newOleDbCommand("SELECTCOUNT(*) FROM Kordinatlar", Baglanti);

            OleDbDataReaderOkuyucu = Komut.ExecuteReader();

            Okuyucu.Read();

            SatirSayisi=(int)Okuyucu.GetValue(0);

            Okuyucu.Close();

            NoktalarMatrisi = new double[SatirSayisi,2];

            /////////////////////////////////////////////

            Komut.CommandText="SELECT X,Y FROM Kordinatlar";

            OleDbDataReaderOkuyucu2=Komut.ExecuteReader();

            inti = 0;

            while(Okuyucu2.Read())

            {

                NoktalarMatrisi[i, 0] = Convert.ToDouble(Okuyucu2.GetValue(0).ToString());

                NoktalarMatrisi[i, 1] = Convert.ToDouble(Okuyucu2.GetValue(1).ToString());

                i++;

            }

            Okuyucu2.Close();

            Baglanti.Close();

        }

        catch

        {

            throw;

        }

    } 
 
Şimdi zannedersem çalıştırılmaya hazır bir projemiz var.Projeyi derleyip çalıştıralım.Aşağıdaki gibi bir sonuç almanız gerekiyor.
 
 
 
Uygulamayı indirmek için tıklayınız  http://rapidshare.com/files/422195261/TezGoogle.rar 
 
Bir makalemin daha sonuna gelmiş bulunuyoruz.Bir sonraki makalemde görüşmek dileğiyle ...
 
Batuhan Düzgün
 
Sakarya Üniversitesi
 
Bilgisayar Mühendisliği 

Currently rated 3.7 by 3 people

  • Currently 3.666667/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Etiketler:

ASP.NET

Comments

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading





Bu site BlogEngine.NET 1.4.5.0 ile oluşturulmuştur. Türkçe çevirisi BlogEngine TR ekibi tarafından yapılmıştır.

Batuhan Düzgün

Sakarya Üniversitesi 

Bilgisayar Mühendisi

Endüstri Mühendisi

Yeditepe Üniversitesi

Bilgisayar Mühendisliği Yüksek Lisans 

 sahibinden.com

   Kıdemli Uzman Yazılım Mühendisi  

E-Mail 

   batuhan.duzgun@sahibinden.com

   batuhan.duzgun@windowslive.com

  github.com/batux

 

Sayfalar

Calendar

<<  May 2019  >>
MoTuWeThFrSaSu
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

Yazıları geniş takvimde göster