Ich weiß, dass dieser Beitrag etwas alt ist, aber ich habe bei SO so viele schlechte Informationen darüber gesehen, dass ich schreien könnte. Also muss ich meine zwei Cent mit einem ganz anderen Ansatz einwerfen, von dem ich weiß, dass er funktioniert, da ich ihn auf vielen Karten zuverlässig verwende. Abgesehen davon glaube ich, dass das OP die Möglichkeit haben wollte, die Pfeilmarkierung auch um den Kartenpunkt zu drehen, was sich von der Drehung des Symbols um seine eigene x-, y-Achse unterscheidet, die sich ändert, wohin die Pfeilmarkierung auf der Karte zeigt.
Denken Sie zunächst daran, dass wir mit Google Maps und SVG spielen. Daher müssen wir die Art und Weise berücksichtigen, in der Google die Implementierung von SVG für Marker (oder tatsächlich Symbole) bereitstellt. Google setzt seinen Anker für das SVG-Markierungsbild auf 0,0, was NICHT die obere linke Ecke der SVG-Ansichtsbox ist. Um dies zu umgehen, müssen Sie Ihr SVG-Bild etwas anders zeichnen, um Google das zu geben, was es will ... Ja, die Antwort liegt in der Art und Weise, wie Sie den SVG-Pfad in Ihrem SVG-Editor (Illustrator, Inkscape usw.) erstellen. .).
Der erste Schritt besteht darin, die viewBox zu entfernen. Dies kann erreicht werden, indem Sie die viewBox in Ihrem XML auf 0 setzen ... das ist richtig, nur eine Null anstelle der üblichen vier Argumente für die viewBox. Dadurch wird das Ansichtsfeld deaktiviert (und ja, dies ist semantisch korrekt). Sie werden wahrscheinlich sofort bemerken, dass die Größe Ihres Bildsprungs sofort springt, und das liegt daran, dass das SVG keine Basis (die ViewBox) mehr hat, um das Bild zu skalieren. Daher erstellen wir diese Referenz direkt, indem wir die Breite und Höhe auf die tatsächliche Anzahl der Pixel einstellen, die Ihr Bild im XML-Editor Ihres SVG-Editors haben soll.
Durch Festlegen der Breite und Höhe des SVG-Bilds im XML-Editor erstellen Sie eine Grundlinie für die Skalierung des Bildes. Diese Größe wird standardmäßig für die Eigenschaften der Markierungsskalierung auf den Wert 1 gesetzt. Sie sehen den Vorteil, den dies für die dynamische Skalierung des Markers hat.
Nachdem Sie die Bildgröße festgelegt haben, verschieben Sie das Bild, bis der Teil des Bildes, den Sie als Anker verwenden möchten, über den 0,0-Koordinaten des SVG-Editors liegt. Sobald Sie dies getan haben, kopieren Sie den Wert des Attributs d des SVG-Pfads. Sie werden feststellen, dass etwa die Hälfte der Zahlen negativ ist. Dies ist das Ergebnis der Ausrichtung Ihres Ankerpunkts auf 0,0 des Bildes anstelle der Ansichtsbox.
Mit dieser Technik können Sie den Marker dann korrekt um den Lat- und Lng-Punkt auf der Karte drehen. Dies ist die einzige zuverlässige Methode, um den gewünschten Punkt auf dem SVG-Marker an den Lat und Long der Markerposition zu binden.
Ich habe versucht, eine JSFiddle dafür zu erstellen , aber es gibt einen Fehler in der Implementierung, einer der Gründe, warum ich neu interpretierten Code nicht so mag. Stattdessen habe ich unten ein vollständig eigenständiges Beispiel eingefügt, das Sie ausprobieren, anpassen und als Referenz verwenden können. Dies ist derselbe Code, den ich bei JSFiddle ausprobiert habe und der fehlgeschlagen ist, der jedoch ohne Wimmern durch Firebug segelt.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Drew G. Stimson, Sr. ( Epiphany )" />
<title>Create Draggable and Rotatable SVG Marker</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<style type="text/css">
#document_body {
margin:0;
border: 0;
padding: 10px;
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: bold;
color: #f0f9f9;
text-align: center;
text-shadow: 1px 1px 1px #000;
background:#1f1f1f;
}
#map_canvas, #rotation_control {
margin: 1px;
border:1px solid #000;
background:#444;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#map_canvas {
width: 100%;
height: 360px;
}
#rotation_control {
width: auto;
padding:5px;
}
#rotation_value {
margin: 1px;
border:1px solid #999;
width: 60px;
padding:2px;
font-weight: bold;
color: #00cc00;
text-align: center;
background:#111;
border-radius: 4px;
}
</style>
<script type="text/javascript">
var map, arrow_marker, arrow_options;
var map_center = {lat:41.0, lng:-103.0};
var arrow_icon = {
path: 'M -1.1500216e-4,0 C 0.281648,0 0.547084,-0.13447 0.718801,-0.36481 l 17.093151,-22.89064 c 0.125766,-0.16746 0.188044,-0.36854 0.188044,-0.56899 0,-0.19797 -0.06107,-0.39532 -0.182601,-0.56215 -0.245484,-0.33555 -0.678404,-0.46068 -1.057513,-0.30629 l -11.318243,4.60303 0,-26.97635 C 5.441639,-47.58228 5.035926,-48 4.534681,-48 l -9.06959,0 c -0.501246,0 -0.906959,0.41772 -0.906959,0.9338 l 0,26.97635 -11.317637,-4.60303 c -0.379109,-0.15439 -0.812031,-0.0286 -1.057515,0.30629 -0.245483,0.33492 -0.244275,0.79809 0.0055,1.13114 L -0.718973,-0.36481 C -0.547255,-0.13509 -0.281818,0 -5.7002158e-5,0 Z',
strokeColor: 'black',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#fefe99',
fillOpacity: 1,
rotation: 0,
scale: 1.0
};
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: map_center,
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
});
arrow_options = {
position: map_center,
icon: arrow_icon,
clickable: false,
draggable: true,
crossOnDrag: true,
visible: true,
animation: 0,
title: 'I am a Draggable-Rotatable Marker!'
};
arrow_marker = new google.maps.Marker(arrow_options);
arrow_marker.setMap(map);
}
function setRotation(){
var heading = parseInt(document.getElementById('rotation_value').value);
if (isNaN(heading)) heading = 0;
if (heading < 0) heading = 359;
if (heading > 359) heading = 0;
arrow_icon.rotation = heading;
arrow_marker.setOptions({icon:arrow_icon});
document.getElementById('rotation_value').value = heading;
}
</script>
</head>
<body id="document_body" onload="init();">
<div id="rotation_control">
<small>Enter heading to rotate marker </small>
Heading°<input id="rotation_value" type="number" size="3" value="0" onchange="setRotation();" />
<small> Drag marker to place marker</small>
</div>
<div id="map_canvas"></div>
</body>
</html>
Dies ist genau das, was Google für seine eigenen Symbole tut, die in der SYMBOL-Klasse der Maps-API verfügbar sind. Wenn Sie das also nicht überzeugt ... Ich hoffe, dies hilft Ihnen dabei, einen SVG-Marker für richtig zu erstellen und einzurichten Ihre Google Maps endevours.