FLEX ile GOOGLE HATIRASI KULLANMA

Buradaki açıklamalar http://www.tutorialized.com/tutorials/Adobe-Flex/1 adresindedir

Flex içinde Google Haritası Kurma ve Kullanma

Google Haritası parçalarının basit bir uygulamada kullanılmasını öğrenmek.

Başlamadan önce bu örneğin nasıl göründüğüyle başlanmalıdır.

Google Haritalarının Flash arayüzü tamamlanmıştır. Burada gerekli parçaların nasıl kurulacağı ve kullanılacağı anlatılır.

Bu örnek ve anlatım Adobe Flex Builder kullanılarak yaratılmıştır. Ama aynı zamanda Flex SDK da kullanılabilmektedir. Bu konuda ayrıntılı bilgi Google sitesinde vardır.

Önce Google Maps SDF indirerek işleme başlanır. Sonra geliştiricinin arayüzü (API) anahtarı uygulanır. Bu iki parça hazır olunca, kendi çalışma ortamınızı oluşturabilirsiniz.

"sdk.zip" dosyasını açın. İçindeki "sdk/lib" yolunda map_flex_1_1.swc dosyası vardır. Bunu bilgisayarınızda bilinen bir yere taşıyın. Bu dosya daha sonra işlem sırasında Flex içine aktarılacaktır.

sdk yolundaki SWC oradan alınmıştır. Flex Builder başlatın ve yeni proje açın (File > New Flex Project).

Bir kez örnek "GoogleMaps Sample" projesi yaratıldığında indirmiş olduğunuz harita swc dosyasına gereke vardır. Bunun için proje giriş noktasıdaki "Flex Navigator" üzerindeyken sağ fare ile tıklayıp özellikleri seçin. Burada "Flex Build Path" seçin ve sonra özellikler giriş alanından "Add SWC..." seçiniz. Swc dosyası seçilmiş olarak "Open" düğmesini tıklayın en sonunda da "Ok" tuşunu tıklayın. "Ok" bir kez daha tıklanınca projenin değişikliklerini saklamak mümkündür.

Google Maps kodları Flex kullanımına açıktır. Şimdi uygulamayı kurmaya başlayabilirsiniz.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
  width="100%" height="100%" initialize="init()">
		
	<mx:Script>
		<![CDATA[
				
		]]>
	</mx:Script>
		
	<mx:UIComponent id="mapContainer" width="100%" height="100%"/>
	
</mx:Application>

Yukarıdaki kod Application biçimindeki bir olayı ayarlar. Aynı zamandan boy ve en de tanımlanır. UIComponent haritanın yüklendiği yerdedir. Bu parçaya tekil bir ad verilmelidir. Yoksa Flex bunu gösteremez.

import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.LatLng;

Artık kodun görüntülenebilir bölümü tamamdır. Bir sonraki adım harita için birkaç sınıf yüklemektir.

private var gMap:Map;

Şimdi özel bir değişken tanımlanır ve harita göstergesi olur.

private function init():void
{
	gMap = new Map();
	gMap.key = "{YOUR_API_KEY_HERE}";
	gMap.width = 600;
	gMap.height = 400;
	gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);
	
	mapContainer.addChild(gMap);
}

Bir sonraki adım init(9 işlevidir. Bu işlev Flex uygulama yüklenince çalıştırılır. Bu işlev yeni bir harita göstergesi yaratır ve gerekli özellikleri ayarlar. Bir kez özellikler ayarlandıktan sonra harita için olay göstergesini eklemek yeterlidir. Böylece harita tümüyle yüklenince taşıyıcıya bağlanmış olur.

private function mapReadyHandler(e:MapEvent):void
{
	gMap.setCenter(new LatLng(42.334184,-71.018372), 13, MapType.HYBRID_MAP_TYPE);
	gMap.setSize(new Point(mapContainer.width, mapContainer.height)); 
}

Kodlamanın son bölümü olay göstergesidir. Bu gösterge harita tümüyle yüklenince çağrılır. Bu kodlama parçası harita koordinatlarını uygulama boyutlarına göre ortalar.

Şimdi uygulama "debug" konumunda denenebilir. Eğer işlev yerel olarak çalıştırılacaksa, harita "DEBUG" ile yüklenir ve tüm özellikler korunur.

Eğer dikkat edilmediyse, Google bu sınıfların belgelerinin hepsini SDK ile göndermiştir. Bunları inceleyip güzel ve basit harita uygulamaları yapabilirsiniz.

Tüm uygulama aşağıda gösterilmiştir.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
  width="100%" height="100%" initialize="init()">
		
	<mx:Script>
	<![CDATA[

	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
	import com.google.maps.LatLng;
		
	private var gMap:Map;

	private function init():void
	{
		gMap = new Map();
		gMap.key = "{YOUR_API_KEY_HERE}";
		gMap.width = 600;
		gMap.height = 400;
		gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);

		mapContainer.addChild(gMap);
	}
	
	private function mapReadyHandler(e:MapEvent):void
	{
		gMap.setCenter(new LatLng(42.334184,-71.018372), 13, MapType.HYBRID_MAP_TYPE);
		gMap.setSize(new Point(mapContainer.width, mapContainer.height)); 
	}
		
	]]>
	</mx:Script>
		
	<mx:UIComponent id="mapContainer" width="100%" height="100%"/>
	
</mx:Application>