Wiem, że ten post jest trochę stary, ale widziałem tak wiele złych informacji na ten temat w SO, że mogłem krzyczeć. Muszę więc po prostu wrzucić moje dwa centy z zupełnie innym podejściem, które wiem, że działa, ponieważ używam go niezawodnie na wielu mapach. Poza tym, uważam, że OP chciał mieć możliwość obracania znacznika strzałki wokół punktu mapy, co różni się od obracania ikony wokół własnej osi x, y, która zmieni miejsce, w którym wskazuje znacznik strzałki na mapie.
Po pierwsze, pamiętaj, że bawimy się mapami Google i SVG, więc musimy dostosować się do sposobu, w jaki Google wdraża implementację SVG dla znaczników (a właściwie symboli). Google ustawia kotwicę dla obrazu znacznika SVG na 0,0, który NIE JEST lewym górnym rogiem SVG viewBox. Aby to obejść, musisz nieco inaczej narysować obraz SVG, aby dać Google to, czego chce ... tak, odpowiedź brzmi w sposobie, w jaki faktycznie tworzysz ścieżkę SVG w swoim edytorze SVG (Illustrator, Inkscape itp.) .).
Pierwszym krokiem jest pozbycie się viewBox. Można to zrobić, ustawiając viewBox w swoim XML na 0 ... to prawda, tylko jedno zero zamiast zwykłych czterech argumentów dla viewBox. Spowoduje to wyłączenie pola widoku (i tak, jest to semantycznie poprawne). Prawdopodobnie zauważysz natychmiastowy skok rozmiaru obrazu, gdy to zrobisz, a dzieje się tak, ponieważ plik SVG nie ma już podstawy (ViewBox) do skalowania obrazu. Dlatego tworzymy to odniesienie bezpośrednio, ustawiając szerokość i wysokość na rzeczywistą liczbę pikseli, które chcesz, aby obraz znajdował się w edytorze XML edytora SVG.
Ustawiając szerokość i wysokość obrazu svg w edytorze XML, tworzysz podstawę skalowania obrazu, a rozmiar ten domyślnie przyjmuje wartość 1 dla właściwości skali markera. Możesz zobaczyć zalety tego dla dynamicznego skalowania znacznika.
Teraz, gdy masz już rozmiar obrazu, przesuwaj go, aż część obrazu, którą chcesz mieć jako kotwica, znajdzie się nad współrzędnymi 0,0 edytora SVG. Po wykonaniu tej czynności skopiuj wartość atrybutu d ścieżki svg. Zauważysz, że około połowa liczb jest ujemna, co jest wynikiem wyrównania punktu zakotwiczenia dla 0,0 obrazu zamiast viewBox.
Użycie tej techniki pozwoli ci wtedy poprawnie obrócić znacznik wokół szer i lng punktu na mapie. To jedyny niezawodny sposób na powiązanie punktu na znaczniku svg, który chcesz, z szerokością i długością miejsca znacznika.
Próbowałem zrobić do tego JSFiddle , ale jest tam jakiś błąd w implementacji, jeden z powodów, dla których nie przepadam za reinterpretacją kodu. Zamiast tego zamieściłem poniżej w pełni samodzielny przykład, który możesz wypróbować, dostosować i wykorzystać jako odniesienie. To ten sam kod, który wypróbowałem w JSFiddle, który się nie powiódł, ale przepływa przez Firebuga bez jęku.
<!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>
Dokładnie to robi Google dla swoich własnych kilku symboli dostępnych w klasie SYMBOL interfejsu API Maps, więc jeśli to Cię nie przekonuje ... W każdym razie mam nadzieję, że pomoże ci to poprawnie stworzyć i skonfigurować znacznik SVG dla Twoje mapy Google starają się.