Menggunakan Fitur Baru Google Maps untuk Flash

() translation by (you can also view the original English article)

Setelah respon positif untuk tutorial pertama saya menerapkan menggunakan peta peta Google API untuk Flash saya memutuskan untuk menulis kedua. Sejak itu pertama tut Google peta API telah diperbarui, sehingga memungkinkan pengembang untuk (antara lain) menambah 3D tampilan peta. Ini adalah fitur yang hebat dan selama tutorial ini saya akan menjelaskan bagaimana menggunakannya.

Juga, banyak orang meminta penjelasan untuk menambahkan penanda kustom; itu hal kedua yang akan kita bahas di sini hari ini.

Langkah 1: Men-Download komponen SDK

Saya tidak akan membangun lebih lanjut di peta sebelumnya kita karena kita perlu men-download komponen peta Google baru. Tidak ada cara untuk menggunakan komponen dari tutorial sebelumnya saya sebagai satu tidak mendukung fungsi 3D. Jadi... pergi ke http://code.google.com/intl/nl/apis/maps/documentation/flash/

Langkah 2: Menginstal komponen SDK

Kita perlu menginstal komponen SDK untuk menggunakannya di Flash. Untuk melakukannya, arahkan ke lokasi tempat Anda menyimpan komponen SDK Google Maps dan menemukan versi bebas-Flex Perpustakaan antarmuka. Dalam kasus saya ini adalah (lib/map_1_18.swc). Sekarang salin file "map_1_18.swc".

Langkah 3: folder

Setelah itu, jika Anda memiliki Flash saat ini terbuka, berhenti aplikasi dan mencari folder ini:

(Windows) C:\Program Files\Adobe\Adobe Flash CS3 (atau versi Flash) \en (atau bahasa Anda) \Configuration\Components
(Mac OS X) Macintosh HD/aplikasi/Adobe Flash CS3 (atau versi Flash) / konfigurasi/komponen

Di dalam folder itu membuat folder baru bernama "google" dan Paste file "map_1_18.swc" di dalamnya. Flash sekarang sudah siap untuk
mendukung Google Maps API untuk Flash.

Langkah 4: Google peta kunci API

OK kita memiliki komponen sekarang tapi sebelum kita bisa bekerja kita masih perlu peta Google API Key untuk mendapatkan peta kami bekerja secara online. Kunci Google API peta gratis dan Anda bisa mendapatkannya di sini:

http://Code.Google.com/intl/nl/Apis/Maps/Documentation/Flash/
.

Langkah 5: Mendaftar

Mengklik link "Sign up for Google Maps API Key" membawa kita ke halaman berikutnya yang mana kita dapat menghasilkan kunci API kami pribadi. Gulir ke bawah halaman, setuju dengan syarat dan ketentuan (Anda bisa membaca ini juga jika Anda benar-benar tertarik) dan menambahkan url situs web yang mana Anda ingin menggunakan aplikasi (Anda akan membutuhkan kunci API yang berbeda untuk setiap domain yang mana Anda ingin menempatkan peta). Setelah itu, klik "menghasilkan API Key (kunci lisensi kedaluwarsa".

Langkah 6: Menyimpannya!

Sekarang Anda akan melihat kunci API Anda pribadi untuk domain dipilih. Salin kunci API dan paste atau menyimpannya di suatu tempat seperti yang kita akan membutuhkannya segera.

Langkah 7: File ActionScript 3.0 baru

OK, pekerjaan membosankan selesai, sekarang kita dapat mulai dengan menyenangkan stuff! Mari kita menyelam ke dalam Flash dan membuat file ActionScript 3.0 baru, standar ukuran panggung (550 x 400).

Langkah 8: Simpan

Saya lebih suka untuk memulai dengan menyimpan file. Sementara aku bekerja aku benar-benar ingin Hit "Ctrl + S" sepanjang waktu, jadi pergi ke depan memukul
"Ctrl + S" atau klik "Simpan File >" dalam menu. Simpan ke lokasi yang Anda inginkan dan nama apapun yang Anda inginkan. Aku akan nama itu
"google_map".

Langkah 9: GoogleMapsLibrary

Membuka panel komponen "Ctrl + F7" atau klik jendela > komponen dalam menu. Tarik GoogleMapsLibrary ke perpustakaan Anda.

Langkah 10: Lapisan tindakan

Untuk menjaga terorganisir saya ingin mengubah nama lapisan pertama untuk "tindakan".

Langkah 11: impor

Dengan lapisan tindakan yang dipilih Buka panel tindakan (memukul "F9" atau klik "Jendela > tindakan") dan menambahkan baris kode ini:

  	import com.google.maps.LatLng;
        import com.google.maps.Map;
        import com.google.maps.Map3D;
        import com.google.maps.MapEvent;
        import com.google.maps.MapType;
        import com.google.maps.View;
        import com.google.maps.geom.Attitude;

Langkah 12: Membuat peta

Sekarang kita akan menciptakan fungsi pertama kami. Pertama kita ingin mendeklarasikan variabel peta kami:

1	// Variables
2	var map:Map3D;

Sekarang kita dapat menambahkan fungsi kami yang kami akan menambahkan peta utama pada tahap:

    	// Function that adds the map on stage
        function add_map()
        {
			map = new Map3D();
    		map.key = "YOUR_API_KEY_HERE";
            map.setSize(new Point(stage.stageWidth, stage.stageHeight));
    		map.addEventListener(MapEvent.MAP_READY, onMapReady);
    		this.addChild(map);
		}

OK, seperti yang Anda lihat kami menambahkan eventlistener yang akan api setelah peta kami dimuat, sehingga memungkinkan juga membuat fungsi:

    	// Function that will fire once map is created
		function onMapReady(event:MapEvent):void 
		{
		    map.setCenter(new LatLng(50.899197766773284, 4.486040573103489), 13);
			map.setAttitude(new Attitude(20,30,0));
		}

Di sini kita telah membuat peta untuk pusat. Fungsi ini memiliki nilai-nilai 3 dan akan menentukan lokasi mana peta akan terbuka. The
nilai-nilai adalah seperti ini "map.setCenter (LatLng baru (lintang, bujur), zoom);". Kemudian kita mendefinisikan modus pemandangan;
karena kami menggunakan peta 3D baru saya akan menggunakan tampilan perspektif. Jika Anda menyukai tampilan peta normal Anda dapat mengubah nilai ini untuk
"View.VIEWMODE_2D".

Kemudian kita menetapkan sikap. Hal ini akan menentukan bagaimana kita melihat peta. Dalam hal ini kita akan menambahkan sedikit perspektif pandangan itu dan
mengubah peta sedikit untuk membuat sudut pandangan yang lebih baik. Anda dapat bermain-main dengan nilai-nilai ini sedikit dan melihat apa yang Anda sukai.

OK, sekarang saatnya untuk memeriksa pertama! Apa yang kita miliki sejauh ini? Yah, apa-apa! Pertama kita perlu sebut fungsi kita membuat
peta! Mari kita tambahkan baris kode di bawah variabel kami:

        // Variables
        var map:Map3D;
        
        // Call the function to create the map
        add_map();

Sana kami pergi! Sekarang hanya menguji film "Ctrl + Enter" atau klik kontrol > menguji film dalam menu...

Langkah 13: Alat navigasi

Ya! Kami memiliki peta menyorot Brussels Airport! Tidak terlalu bagus? Mungkin tidak... Mari kita lihat apa yang kita miliki di sini. Kami memiliki peta dan kita dapat menarik peta seputar. Jadi apa yang kita butuhkan selanjutnya adalah alat untuk menavigasi di sekitar peta, memperbesar dan memperkecil peta. Mari kita mulai dengan alat navigasi tersebut pertama!

Pertama-tama mari kita mengimpor 3 kelas tambahan; Tambahkan baris ini di bawah kode impor lain dalam script kami:

1	import com.google.maps.controls.NavigationControl;
2	import com.google.maps.controls.MapTypeControl;
3	import com.google.maps.controls.OverviewMapControl;

Tidak pergi untuk onMapReady() fungsi dan tambahkan baris ini 3 kode di bawah garis lain:

1	map.addControl(new MapTypeControl());
2	map.addControl(new OverviewMapControl());
3	map.addControl(new NavigationControl());

Di sini kami menambahkan peta jenis kontrol, jadi sekarang kita bisa merubah peta. Kemudian kami menambahkan peta Ikhtisar kontrol ke kanan bawah dari peta kami. Dan kita menambahkan perangkat navigasi peta. Ini adalah kode sumber lengkap kita seperti seharusnya terlihat sekarang:

    	import com.google.maps.LatLng;
		import com.google.maps.Map;
		import com.google.maps.Map3D;
		import com.google.maps.MapEvent;
		import com.google.maps.MapType;
		import com.google.maps.View;
		import com.google.maps.geom.Attitude;
		import com.google.maps.controls.NavigationControl;
		import com.google.maps.controls.MapTypeControl;
		import com.google.maps.controls.OverviewMapControl;

		// Variables
		var map:Map3D;

		// Call the function to create the map
		add_map();

		// Function that adds the map on stage
		function add_map()
		{
			map = new Map3D();
    		map.key = 'YOUR_API_KEY_HERE';
			map.setSize(new Point(stage.stageWidth, stage.stageHeight));
    		map.addEventListener(MapEvent.MAP_READY, onMapReady);
    		this.addChild(map);
		}

		// Function that will fire once map is created
		function onMapReady(event:MapEvent):void 
		{
			map.setCenter(new LatLng(50.899197766773284, 4.486040573103489), 13);
			map.viewMode = View.VIEWMODE_PERSPECTIVE;
			map.setAttitude(new Attitude(20,40,0));
			map.addControl(new MapTypeControl());
    		map.addControl(new OverviewMapControl());
    		map.addControl(new NavigationControl());
		}

Pergi ke depan dan menguji film Anda lagi. Anda dapat melihat bahwa Anda dapat bergerak di sekitar peta sangat mudah sekarang dengan ini funky mencari baru
kontrol!

Langkah 14: Bar tanpa bir

Saya pikir sudah waktunya untuk pindah ke bagian penanda yang; peta tanpa penanda adalah seperti sebuah bar tanpa bir bukan? Ada hal-hal konyol kali ini! Mari kita pindah ke penanda Custom langsung!

Kami ingin menempatkan penanda kami kustom ke peta dengan informasi yang akan disimpan dalam sebuah file XML eksternal. Mari kita mulai dengan menciptakan sebuah penanda kustom, maka kami akan membuat XML file dan setelah bahwa kami akan memuat ke Flash.

Langkah 15: Menciptakan penanda kustom

Saya tidak banyak dari seorang desainer jadi saya pikir Anda akan mampu menciptakan sebuah penanda dingin banyak daripada yang saya miliki! Thats mengapa aku tidak akan menghabiskan terlalu banyak waktu ini. Hanya menggambar beberapa lingkaran, menempatkan mereka di atas satu sama lain, pilih everything, tekan F8, pilih movieklip, nama itu "marker_mc" dan pilih ekspor untuk Actionscript. Tekan "OK".

Seperti yang saya sebutkan sebelumnya, saya berharap Anda akan membuat pendingin dan lebih baik mencari penanda daripada ini! Hanya menggambar penanda Anda sendiri dan
rahasia untuk moviclip seperti dijelaskan di atas.

Setelah Anda membuat movieklip akan muncul dalam perpustakaan Anda. Anda dapat kemudian menghapusnya dari tahap seperti yang kita akan mengimpor menggunakan
ActionScript (itulah sebabnya mengapa Anda harus memilih opsi "Ekspor untuk ActionScript"). Di perpustakaan kami, kami sekarang memiliki 2 item; The
GoogleMapsLibrary dan marker_mc kami.

Langkah 16: File XML

OK, di sini kita berada. Kami memiliki peta dan (dalam kasus Anda) penanda sangat tampan! Sekarang mari kita membuat XML file. Buka editor kode favorit Anda, membuat file ini dan Simpan sebagai locations.xml.

<?xml version="1.0" encoding="utf-8"?>
 <map_xml>
 
  <location>
   <lat>50.899197766773284</lat>
   <lon>4.486040573103489</lon>
   <name_tip>Brussels</name_tip>
   <title_tip><![CDATA[Brussels]]></title_tip>
   <content_tip><![CDATA[Brussels Airport.]]></content_tip>
  </location>
  
  <location>
   <lat>49.004024443647324</lat>
   <lon>2.571113562006575</lon>
   <name_tip>Paris</name_tip>
   <title_tip><![CDATA[Paris]]></title_tip>
   <content_tip><![CDATA[Paris Airport.]]></content_tip>
  </location>
  
  <location>
   <lat>51.4699229971675</lat>
   <lon>-0.45367874251784013</lon>
   <name_tip>London</name_tip>
   <title_tip><![CDATA[London]]></title_tip>
   <content_tip><![CDATA[London Airport.]]></content_tip>
  </location>
 
 </map_xml>

Langkah 17: Loading XML

Kita perlu untuk mendapatkan XML data ke film flash kami. Untuk melakukannya, kita perlu membuat sebuah fungsi baru yang akan memuat xml kami. Tambahkan
ini potongan kode ke bagian bawah script. Dalam fungsi onMapReady() kita, kita memanggil fungsi load_xml() baru ini. Setelah peta kami siap kita akan mulai loading xml.

        // Function that will load the xml
    	function loadXML(e:Event):void
        {
	        XML.ignoreWhitespace = true; 
	        var map_xml:XML = new XML(e.target.data);
        }
        
        function load_xml()
        {
			var xmlLoader:URLLoader = new URLLoader();
			xmlLoader.addEventListener(Event.COMPLETE, loadXML);
			xmlLoader.load(new URLRequest("locations.xml"));
		}

Langkah 18: Loop melalui lokasi

Seperti yang kita telah 3 lokasi di file XML kami kita akan perlu untuk membuat "Untuk" lingkaran dan menyimpan semua data dalam beberapa array. Di dalam kami
fungsi loadXML() kita menambahkan sepotong kode untuk membuat untuk loop:

1	for (var i:Number = 0; i < map_xml.location.length(); i++)
2	{
3	trace(map_xml.location[i].title_tip);
4	}

Jika kita menguji film kami sekarang kita dapat melihat film kami output xml data. Sekarang mari kita bekerja dengan itu.

Step 19: Membuat variabel

Selanjutnya kita harus membuat beberapa variabel untuk menyimpan data kami diambil dari XML file. Di dalam kami untuk loop kita menambahkan variabel ini:

1	var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
2	var tip = map_xml.location[i].name_tip;
3	var myTitle:String = map_xml.location[i].title_tip;
4	var myContent:String = map_xml.location[i].content_tip;

Anda dapat menghapus garis "trace()" yang kita digunakan sebelum seperti yang kita tahu hal-hal yang bekerja.

Langkah 20: Menambahkan penanda pada peta

Sekarang bahwa kita memiliki semua data xml kami disimpan dalam variabel kita bisa mendapatkan untuk memuat penanda kami ke peta. Pertama kami menambahkan beberapa kelas tambahan ke kode kita. Menambahkan sepotong kode di bawah kelas-kelas lain:

1	import com.google.maps.overlays.*;
2	import com.google.maps.InfoWindowOptions;
3	import com.google.maps.MapMouseEvent;

Buat sebuah fungsi baru yang disebut createMarker(). Kami ingin menambahkan fungsi ini sebelum fungsi loadXML() kami.

    	// Add Markers On The Map
        function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker 
        {
            var i:Marker = new Marker(
									  latlng,
									  new MarkerOptions({
                                                             hasShadow: true,
				                                             tooltip: ""+tip  
                                                       })
									 );
            return i;
        }

Kita memanggil fungsi createMarker() untuk setiap penanda kita perlu menambahkan ke peta, sehingga dalam kami untuk Loop kita menambahkan baris kode ini:

1	map.addOverlay(createMarker(latlng, i, tip, myTitle, myContent));

Jika Anda menguji film sekarang Anda dapat melihat bahwa kita memiliki tanda-tanda pada peta kami lokasi-lokasi yang kami ditentukan di file xml kami! Itu hebat, tapi kami tidak membuat marker khusus yang hebat itu, bukan? Kami akan menghapus spidol standar itu dan menambahkan spidol khusus kami.

Langkah 21: Tambahkan Penanda Kustom

Pertama-tama kita perlu membuat objek marker kustom kita. Tambahkan kode ini ke fungsi createMarker (), di atas sisa kode:

    	// create Custom marker object
        var markerPin:marker_mc = new marker_mc();     
        // If your marker is to big you can scale it down here
	    markerPin.width = 20;
	    markerPin.height = 20;

Setelah itu, kita akan pergi ke bagian kode berikutnya di mana kita harus menambahkan baris ke Pilihan marker. Cari bagian kode ini:

1	new MarkerOptions({
2	hasShadow: true,
3	tooltip: ""+tip
4	})

dan ubah ke:

    	new MarkerOptions({
                               hasShadow: true,
                               icon: this.addChild(markerPin),
				               tooltip: ""+tip  
                         })

Baik! Uji film Anda dan periksa hasilnya!

Langkah 22: Pindah

OK, selanjutnya apa? Jendela Info! Ketika kita mengklik penanda kita, kita perlu mendapatkan informasi yang kita tambahkan ke file XML kita. Sebelum kita menambahkan jendela informasi Saya hanya ingin menghapus garis kuning jelek di sekitar peta kita, sudahkah Anda perhatikan? Ketika Anda fokus pada peta itu menunjukkan garis kuning di sekitarnya. Saya pribadi benar-benar tidak suka itu, jadi mari kita hapus. Cukup tambahkan baris kode ini di bawah bagian variabel kami:

1	// No focus line
2	stage.stageFocusRect = false;

Ok sudah selesai! Mari kita tambahkan jendela Info. Tambahkan sedikit kode lagi ke fungsi createMarker () kami:

    	i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void 
        {
            map.openInfoWindow(event.latLng, new InfoWindowOptions({
                                                                        titleHTML: ""+myTitle, 
                                                                        contentHTML: ""+myContent
                                                                   }));
																			  											 
		});

Seperti inilah fungsi createMarker () kami sekarang:

    	function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker 
		{
			// create Custom marker object
			var markerPin:marker_mc = new marker_mc();
			// If your marker is to big you can scale it down here
			markerPin.width = 20;
			markerPin.height = 20;
	
			var i:Marker = new Marker(
							  		latlng,
							  		new MarkerOptions({
														    hasShadow: true,
															icon: this.addChild(markerPin),
				            		                        tooltip: ""+tip  
                    		                           })
									 );
			i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void 
    		{
				map.openInfoWindow(event.latLng, new InfoWindowOptions({
																	       titleHTML: ""+myTitle, 
                    		                                               contentHTML: ""+myContent
            		                                                  }));
																			  											 
    		});
			return i;
		}

Uji film Anda dan sekarang Anda akan memiliki info windows juga.

Langkah 23: Kode Lengkap

Baik itu saja! Selamat, Anda baru saja membuat Google Map Dengan navigasi 3D dan spidol Kustom! Pekerjaan yang sangat baik! Mari
terakhir lihat kode kami:

    	import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.Map3D;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.View;
import com.google.maps.geom.Attitude;
import com.google.maps.controls.NavigationControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.OverviewMapControl;
import com.google.maps.overlays.*;
import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent; 

// Variables
var map:Map3D;

// No focus line
stage.stageFocusRect = false; 

// Call the function to create the map
add_map();


// Function that adds the map on stage
function add_map()
{
	map = new Map3D();
    map.key = 'YOUR_API_KEY_HERE';
	map.setSize(new Point(stage.stageWidth, stage.stageHeight));
    map.addEventListener(MapEvent.MAP_READY, onMapReady);
    this.addChild(map);
}

// Function that will fire once map is created
function onMapReady(event:MapEvent):void 
{
	map.setCenter(new LatLng(50.899197766773284, 4.486040573103489), 13);
	map.viewMode = View.VIEWMODE_PERSPECTIVE;
	map.setAttitude(new Attitude(20,40,0));
	map.addControl(new MapTypeControl());
    map.addControl(new OverviewMapControl());
    map.addControl(new NavigationControl());
	
	// Load the xml
	load_xml();
}


// Add Markers On The Map
function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker 
{
	// create Custom marker object
	var markerPin:marker_mc = new marker_mc();
	// If your marker is to big you can scale it down here
	markerPin.width = 20;
	markerPin.height = 20;
	
	var i:Marker = new Marker(
							  latlng,
							  new MarkerOptions({
												    hasShadow: true,
													icon: this.addChild(markerPin),
				                                    tooltip: ""+tip  
                                               })
							 );
	i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void 
    {
		map.openInfoWindow(event.latLng, new InfoWindowOptions({
															       titleHTML: ""+myTitle, 
                                                                   contentHTML: ""+myContent
                                                              }));
																			  											 
    });
	return i;
}


// Function that will load the xml
function loadXML(e:Event):void
{
	XML.ignoreWhitespace = true; 
    var map_xml:XML = new XML(e.target.data);	
	for (var i:Number = 0; i < map_xml.location.length(); i++)
	{
		var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
		var tip = map_xml.location[i].name_tip;
		var myTitle:String = map_xml.location[i].title_tip;
		var myContent:String = map_xml.location[i].content_tip;
		
		map.addOverlay(createMarker(latlng, i, tip, myTitle, myContent)); 
	}
}

function load_xml()
{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.addEventListener(Event.COMPLETE, loadXML);
	xmlLoader.load(new URLRequest("locations.xml"));
}

Kesimpulan

Anda dapat menggunakan peta ini di situs web Anda, mengedit lokasi yang Anda inginkan, terserah Anda. Silakan bereksperimen, jika Anda memiliki hasil yang bagus, pastikan untuk membagikannya kepada kami.

Saya harap Anda menyukai tutorial ini, terima kasih sudah membaca!