Bild in Google Maps V3 drehen?

Question

Ich brauche Hilfe mit JavaScript in Google Map v3 Ich habe ein Bild und ich muss in der Lage sein, es zu drehen. Das funktioniert, aber das wirkliche Problem ist, dass ich einen Marker nicht beeinflussen kann, weil ich nicht weiß, wie ich es nennen und diesen Marker modifizieren soll. Ich zeige Ihnen, einen Teil des Codes:

Marker:

sURL = 'http://www.sl2o.com/tc/picture/Fleche.PNG'; 
iWidth = 97; 
iHeight = 100; 

mImage = new google.maps.MarkerImage(sURL, new google.maps.Size(iWidth,iHeight), new google.maps.Point(0,0), new google.maps.Point(Math.round(iWidth/2),Math.round(iHeight/2))); 

var oMarker = new google.maps.Marker({ 
'position': new google.maps.LatLng(iStartLat,iStartLon), 
'map': map, 
'title': 'mon point', 
'icon': mImage 
}); 

Dann habe ich dieses:

onload=function(){ 
rotate.call(document.getElementById('im'),50); 
} 
</script> 
<img id="im" src="http://www.sl2o.com/tc/picture/Fleche.PNG" width="97" height="100" /> 

hier So ist es. Wie Sie sehen können, bin ich dieses Bild und ich muss tatsächlich den Marker beeinflussen. Wie kann ich es tun ? Bitte, ich brauche das seit Stunden und Stunden. Vielen Dank !!

Answer 1

Leider bietet die Google Maps API keine Methoden für den Zugriff auf das img-Element (ich habe es viele Male gesucht). Die img-Elemente sind im DOM-Baum gemischt und somit suchbar. dh:

var imgElements = document.getElementsByTagName('img'), 
    i = 0; 
for (i = 0; i < imgElements.length; i+= 1) { 
    if (imgElements[i].src === 'http://www.sl2o.com/tc/picture/Fleche.PNG') { 
     rotate.call(imgElements[i], 50); 
    } 
} 

Das wird alle img-elments mit dem angegebenen src drehen, könnten Sie mehr Bedingung addieren, wenn Aussage genauer zu sein.

Aber das ist in der Regel keine gute Lösung, da oft mehr Marker dann hat man die gleiche img src.

Ich würde mehr als ein Bild machen und drehen Sie sie in Photoshop (oder einem anderen Werkzeug zur Bildbearbeitung) und dann erstellen Sie eine neue MarkerImage für jede Variante, die Sie verwenden möchten. Und das Bild des Markers mit .setIcon() ändern. dh:

oMarker.setIcon(mImage); 

..fredrik

Answer 2

In meinem Projekt möchte ich ein Bild drehen. Das ist, warum ich viel markerImages bauen: for (var i = 1; i < 31; i ++) { nadelimages [i] = new google.maps.MarkerImage ( ‘./static/map/Kompass_'+i+ '.png', neue google.maps.Size (w, w), neue google.maps.Point (0,0), neue google.maps.Point (w/2, w/2) );

Jetzt: var rotatePin = function() { ni = ni + 1 if (ni> 29) ni = 1; nadelMarkers [1] .setIcon (Nadimelimage [ni]); setTimeout (rotatePin, 100); }

In der Lösung oben SetIcon nicht Update aber es das neue Markierungsbild einzufügen. Die Anzahl der Marker wächst.

var rotatePin = Funktion() { ni = ni + 1 wenn (ni> 29) ni = 1; nadelMarkers [1] .setIcon ('./ statisch/map/Kompass _' + ni + '. Png'); setTimeout (rotatePin, 100); }

In diesem Fall funktioniert es gut, aber das Zentrum ist nicht das Zentrum des Bildes, aber es ist Centerbottom.

Andere Lösungen?

Rainer