Posts Tagged ‘markere personalizate’

Google Maps cu Adobe Flex – markere personalizate

Zilele trecute am fost pus in situatia de a crea ferestre de informare pentru toate markerele ce le adaugam pe o aplicatie dezvoltata in Flex cu ajutorul Google Maps. Informatia pentru fiecare marker vine dintr-o baza de date si pentru ca aveam nevoie ca in momentul in care utilizatorul executa dublu click aplicatia sa presteze o actiune in functie de un id primit din baza m-am hotarat sa caut pe net cum poti crea markere customizate nu doar din punctul de vedere vizual cat si din prisma datelor adiacente.
Singura chestie relevanta a fost a unui baiat care explica cum a facut el pentru o aplicatie de rezervare bilete de avion. Din informatiile de care avea nevoie isi crea un string cu toate datele delimitate de underscore iar acest string il asocia campului icon din MarkerOptions. Pentru a rezolva erorile de runtime extinsese clasa Bitmap astfel incat sa primeasca pe constructor un string. Solutia e ok daca nu ai de-a face cu date multe si variate. Intrebarea mea este: De ce nu poti extinde clasa Marker?

package custom
{
  import com.google.maps.LatLng;
  import com.google.maps.overlays.Marker;
  import com.google.maps.overlays.MarkerOptions;

  public class TtMarker extends Marker
  {
   public var id:int;
   public var name:String;
   public var shortDescription:String;
   public var image:String;
   public var url:String;
   public var lat:Number;
   public var lng:Number;

   public function TtMarker(arg0:LatLng, arg1:MarkerOptions=null)
   {
    super(arg0, arg1);
   }

  }
}

Avand la dispozitie markerData, un obiect cu informatiile despre marker obtinut din baza de date, declararea am facut-o in modul urmator:

var markerOptions:MarkerOptions = new MarkerOptions({
  icon:markerIconData,
  iconAlignment:MarkerOptions.ALIGN_BOTTOM
});

var position:LatLng = new LatLng(
  markerData.lat as Number,
  markerData.lng as Number
);
var marker:TtMarker = new TtMarker(position, markerOptions);
marker.id = markerData.id;
marker.name = markerData.name;
marker.image = markerData.image;
marker.shortDescription = markerData.shortDescription;
marker.url = markerData.url;
marker.lat = markerData.lat;
marker.lng = markerData.lng;

marker.addEventListener(MapMouseEvent.CLICK,markerShowWindow);
googleMap.addOverlay(marker);

apoi pentru a evidentia si modul in care ne folosim de datele din marker mai jos gasiti si ce se intampla cand se executa click pe marker

private function markerShowWindow(event:MapMouseEvent):void
{
  var newMarker:TtMarker = event.currentTarget as TtMarker;
  var infoWindow:InfoWindowOptions = new InfoWindowOptions();
  var html:String = '';
  html += '<img  src="/images/'+newMarker.image+'" />';
  html += newMarker.shortDescription + '';
  html += '<a href="/'+newMarker.url+'" >Detalii</a>';

  infoWindow.padding = 5;
  infoWindow.contentHTML = html;
  infoWindow.height = 210;
  infoWindow.width = 230;
  newMarker.openInfoWindow(infoWindow);
}

Tags: , , , ,

No Comments



SetPageWidth