Antwort

6
  1. Um einen Pfeil über eine Google-Karte zeigen Sie ein Rich Marker erstellen können, die ein Bild mit den google-maps-utility-library-v3,
  2. Nächstes eine Drehung in Grad auf das Bildelement mit css3 Transformationen einbetten gilt.

Im Beispiel:

 

// content element of a rich marker 
var richMarkerContent = document.createElement('div'); 

// arrow image 
var arrowImage   = new Image(); 
arrowImage.src   = 'http://www.openclipart.org/image/250px/' + 
          'svg_to_png/Anonymous_Arrow_Down_Green.png'; 

// rotation in degree 
var directionDeg   = 144 ; 

// create a container for the arrow 
var rotationElement  = document.createElement('div'); 
var rotationStyles  = 'display:block;' + 
          '-ms-transform:  rotate(%rotationdeg);' + 
          '-o-transform:  rotate(%rotationdeg);' + 
          '-moz-transform:  rotate(%rotationdeg);' + 
          '-webkit-transform: rotate(%rotationdeg);' ; 

// replace %rotation with the value of directionDeg 
rotationStyles   = rotationStyles.split('%rotation').join(directionDeg); 

rotationElement.setAttribute('style', rotationStyles); 
rotationElement.setAttribute('alt', 'arrow'); 

// append image into the rotation container element 
rotationElement.appendChild(arrowImage); 

// append rotation container into the richMarker content element 
richMarkerContent.appendChild(rotationElement); 

// create a rich marker ("position" and "map" are google maps objects) 
new RichMarker(
    { 
     position : position, 
     map   : map, 
     draggable : false, 
     flat  : true, 
     anchor  : RichMarkerPosition.TOP_RIGHT, 
     content  : richMarkerContent.innerHTML 
    } 
); 
 
+0

Dank Sébastien. Ich war auf der Suche nach einer schnellen und einfachen Möglichkeit, einen Marker zu drehen, und dies ist bei weitem die beste Option für mich. Ein zweites Dankeschön für ein funktionierendes Beispiel. –