Web uygulamalarında bilindik en iyi harita hizmeti veren firmalar google ile microsoft. Özellikle Amerika için hizmetleri oldukça fazla. Bunlardan en önemlileri arasında ise güncel trafik bilgileri, nereden nereye hangi otobüs ile gidilebileceği gibi hizmetler var. Bu makalede VirtualEarth ile web uygulamalarınızda(bir sonraki makalede windows uygulamalarında) nasıl harita kullanabileceğimizi anlatacağım.
Virtual Earth ile çalışabilmek için :
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
Scriptini kullanmak gerekiyor. Bu script sayesinde gerekli metotları çağırarak istediğimiz işlemleri yapabiliyoruz. En yalın hali ile harita görüntüleyebilmek için LoadMap() metodunu kullanmak gerekiyor. Bu metod özelleştirilmemiş hali ile size haritayı göstermeyi sağlıyor. Tabii bu metodu kullanmak için ise ile önce VEMAP sınıfının bir instance’ını almanız gerekiyor. Kullanmanız gereken javascript aşağıdadır :
<script type="text/javascript">
var harita = null;
function HaritaGetir()
{
harita = new VEMap("haritaDivID")
// haritayı yükle
harita.LoadMap();
}
</script>
Bundan sonra ise yapmanız gereken sadece bir div oluşturmak ve metodu çağırmak. Yukarıda haritaDivID isminde bir kontrol çağırıldı. Bu kontrol haritanın görüntüleneceği div kontrolüne vereceğimiz Id özelliğidir.
Gereken diğer kodlar ise aşağıdadır:
<body onload="HaritaGetir();" style="margin-left:0px;margin-top:0px;">
<div id="haritaDivID" style="position:relative; width:1500px;height:1000px;">
</div>
</body>
</html>
Çalışan örneği görmek için tıklayın.
En basit şekli ile haritamızı gösterdik. Gösterdiğimiz harita üzerinde şu anda istediğimiz bir yeri gösteremiyoruz çünkü arama özelliğini aktif hale getirmedik. Arama yapabilmek için LoadMap metodundan sonra ShowFindControl metodunu çalıştırmanız gerekiyor. Bir önceki javascript dosyasının güncellenmiş hali aşağıdadır:
// Eğer haritada arama işleminin aktif olmasını istiyorsanız ShowFindControl() metodunu çağırın. Bu metod LoadMap metodundan sonra çağırılmalıdır
harita.ShowFindControl();
Artık gösterdiğiniz haritalar üzerinde arama işlemi yapabileceğiz. Çalışan örneğe ulaşmak için tıklayın.
Arama yapmak için kontrol kullanmak istemezseniz Find metodu size yardımcı olacaktır. Bu metot sizden 2 parametre isteyecek. Bunlardan ilki ne arayacağınız (what) ikincisi ise nerede(where) arayacağınızdır. Örneğin Find(“Lütfü Kırdar”, “istanbul”) gibi bir arama yapabilirsiniz. Haritanın kendi arama kontrolü kullanmak yerine kendi arama textbox kontrollerini kullanıp daha da özelleştirebilirsiniz arama işlemini. Güncellenmiş javascript dosyamız aşağıdadır:
harita.Find("", "istanbul");
Bu örnek içerisinde hem arama kontrolü gösteriyoruz hemde İstanbul’u arıyoruz. Dolayısıyla haritamız açıldığında otomatik olarak İstanbul’u gösteriyor. (İlk başta Load metodunu çalıştırdığımız için standart harita görünecek daha sonra İstanbul’a yönlendirme yapılacak).
Çalışan örneğe ulaşmak için tıklayın.