Google map V3 tips: Dancing markers

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

Google map V3 tips: Dancing markers

Δημοσίευση από tattooiv » 26 Φεβ 2012 20:12

Με πολυ λιγες γραμμες κώδικα μπορούμε να δώσουμε ενα πολυ ωραίο εφέ στα markers μας. Μπορουν με το που φορτώνουμε τον χαρτη μας να πεφτουν τα marker απο τον ουρανο και να προσγειώνονται στα επιλεγμενα σημεια που εχουμε ορίσει και επισεις οταν επιλεγουμε καποιο marker αυτο να χοροπηδαει!!! :kaloe:

Στις επιλογες του marker προσθετουμε και την επιλογη : animation: google.maps.Animation.DROP για να εχουμε το εφε οπου προσγειώνονται πανω στον χαρτη.

Κώδικας: Επιλογή όλων

new google.maps.Marker({
  position: latLng,
  map: map,
  draggable: true,
  animation: google.maps.Animation.DROP
 });
Εχουμε την μέθοδο setAnimation() η οποια μπορει να παρει σαν εντολη ειτε την DROP (προσγειώνονται πανω στον χαρτη) ειτε την BOUNCE (χοροπηδανε τα marker), και για να σταματησουμε αυτην την εντολη χρησιμοποιουμε την marker.setAnimation(null); θα γραψω καποια κομματια κωδικα που χρησιμοποιω εγω για τον δικο μου χαρτη και ελπιζω να καταλαβαιτε πως δουλευουν... :)

οταν παταω πανω στο marker αυτο αρχιζει να χοροποιδαει

Κώδικας: Επιλογή όλων

google.maps.event.addListener(marker, 'click', function () {
			if (infowindow)	{		
				infowindow.close(map, marker);
				 marker.setAnimation(null);	}	
			infowindow = infoBubble;
			marker.setAnimation(google.maps.Animation.BOUNCE );
			infowindow.open(map, marker);});
οταν παταμε το icon close μεσα στο marker να σταματαει και η κινηση του marker

Κώδικας: Επιλογή όλων

google.maps.event.addListener(infowindow ,'closeclick',function(){
				marker.setAnimation(null);
			});
οταν παταμε μεσα στον χαρτη να σταματανε οι κινησεις

Κώδικας: Επιλογή όλων

google.maps.event.addListener(map, 'click', function() {
    			    infowindow.close(map, marker);
    			    marker.setAnimation(null);
      				  });

Για περισσοτερες πληροφορίες παραθετω καποια Link me παραδείγματα, θα παρατηρείσετε οτι στο 2ο link εχουμε DROP marker οταν παταμε πανω στο κουμπι. χρησιμοποιούμε τις εντολες αναλογα με το τι θελουμε να κανουμε εμεις στον δικο μας χαρτη!!
code.google.com/intl/el-GR/apis/maps/documentation/javascript/examples/marker-animations.html
code.google.com/intl/el-GR/apis/maps/documentation/javascript/examples/marker-animations-iteration.htmlwww.easypagez.com/maps/clickdrag.html

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες