Вы не указали это в своем вопросе, но я предполагаю, что вы хотите, чтобы это вращение было связано с линией между точкой а и точкой b, которая будет их траекторией.Чтобы сделать значок Google SVG, который можно вращать, вы хотите использовать объект класса символа Google, чтобы определить свойства вашего символа маркера.При этом используется не полный файл .svg, а только атрибут d пути.Обратите внимание, что класс символов Google может использовать только один путь для каждого маркера.
Дополнительные атрибуты для цвета, обводки, ширины, непрозрачности и т. Д. Могут быть установлены после создания маркера с помощью JavaScript (обновление свойств объекта маркеранапрямую) или с помощью CSS (обновление свойств маркера путем добавления и удаления классов).
В качестве примера ниже будет создан маркер стрелки, который можно перетаскивать, и он будет вращаться вокруг точки накарта, которая является последней и длинной для маркера даже после его перемещения.
HTML
<body id="document_body" onload="init();">
<div id="rotation_control">
Heading°<input id="rotation_value" type="number" size="3" value="0" onchange="setRotation();" />
</div>
<div id="map_canvas"></div>
</body>
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;
}
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;
}
И самое лучшее, делая это таким образом, гарантирует, что маркер является объектом Google MVC, предоставляя ему все дополнительные методыпредоставляется объектом MVC.
Если в качестве маркера необходимо использовать разноцветные изображения, то создайте спрайт-лист .png с отображением изображения ввсе углы, которые вы хотите, чтобы он был показан, а затем проблематично выбрать правильное изображение для использования на основе вычисленного ориентира между двумя точками, которые вы используете.Однако это будет не изображение SVG, а обычное изображение маркера.
Надеюсь, это поможет принять некоторые решения относительно маркеров вашей карты.