So che questo post è un po 'vecchio, ma ho visto così tante cattive informazioni su questo a SO che potrei urlare. Quindi devo solo buttare i miei due centesimi con un approccio completamente diverso che so funziona, poiché lo uso in modo affidabile su molte mappe. Oltre a ciò, credo che l'OP volesse anche la possibilità di ruotare l'indicatore della freccia attorno al punto della mappa, il che è diverso dalla rotazione dell'icona attorno al proprio asse x, y che cambierà il punto in cui l'indicatore della freccia punta sulla mappa.
Innanzitutto, ricorda che stiamo giocando con le mappe di Google e SVG, quindi dobbiamo adattarsi al modo in cui Google distribuisce la sua implementazione di SVG per i marcatori (o in realtà i simboli). Google imposta il suo ancoraggio per l'immagine del marker SVG a 0,0 che NON È l'angolo superiore sinistro del viewBox SVG. Per aggirare questo problema, devi disegnare la tua immagine SVG in modo leggermente diverso per dare a Google quello che vuole ... sì, la risposta è nel modo in cui crei effettivamente il percorso SVG nel tuo editor SVG (Illustrator, Inkscape, ecc. .).
Il primo passo è sbarazzarsi di viewBox. Questo può essere fatto impostando il viewBox nel tuo XML su 0 ... esatto, solo uno zero invece dei soliti quattro argomenti per il viewBox. Questo disattiva la casella di visualizzazione (e sì, questo è semanticamente corretto). Probabilmente noterai che la dimensione della tua immagine salta immediatamente quando lo fai, e questo perché svg non ha più una base (il viewBox) per ridimensionare l'immagine. Quindi creiamo quel riferimento direttamente, impostando la larghezza e l'altezza sul numero effettivo di pixel che desideri che la tua immagine sia nell'editor XML del tuo editor SVG.
Impostando la larghezza e l'altezza dell'immagine SVG nell'editor XML si crea una linea di base per il ridimensionamento dell'immagine e questa dimensione diventa un valore di 1 per le proprietà della scala del marker per impostazione predefinita. Puoi vedere il vantaggio che questo ha per il ridimensionamento dinamico del marker.
Ora che hai la dimensione dell'immagine, sposta l'immagine fino a quando la parte dell'immagine che desideri avere come ancoraggio si trova sulle coordinate 0,0 dell'editor svg. Una volta fatto questo, copia il valore dell'attributo d del percorso svg. Noterai che circa la metà dei numeri sono negativi, il che è il risultato dell'allineamento del punto di ancoraggio per lo 0,0 dell'immagine anziché per il viewBox.
L'utilizzo di questa tecnica ti consentirà di ruotare correttamente il marker, attorno al punto lat e lng sulla mappa. Questo è l'unico modo affidabile per legare il punto sul marker SVG che si desidera alla latitudine e alla longitudine della posizione del marker.
Ho provato a creare un JSFiddle per questo , ma c'è qualche bug nell'implementazione, uno dei motivi per cui non amo così tanto il codice reinterpretato. Quindi, invece, ho incluso di seguito un esempio completamente autonomo che puoi provare, adattare e utilizzare come riferimento. Questo è lo stesso codice che ho provato su JSFiddle che non è riuscito, ma naviga attraverso Firebug senza un piagnucolio.
<!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>
Questo è esattamente ciò che fa Google per i suoi pochi simboli disponibili nella classe SYMBOL dell'API di Maps, quindi se questo non ti convince ... Comunque, spero che questo ti aiuti a creare e impostare correttamente un marker SVG per le tue mappe di Google endevours.