Я знаю, что этот пост немного устарел, но я видел так много плохой информации по этому поводу в SO, что я мог кричать. Так что я просто должен вложить свои два цента в совершенно другой подход, который, как я знаю, работает, поскольку я надежно использую его на многих картах. Кроме того, я считаю, что OP также хотел иметь возможность вращать маркер стрелки вокруг точки карты, что отличается от поворота значка вокруг собственной оси x, y, которая изменит положение маркера стрелки на карте.
Во-первых, помните, что мы играем с картами Google и SVG, поэтому мы должны приспособить способ, которым Google развертывает свою реализацию SVG для маркеров (или фактически символов). Google устанавливает привязку для изображения маркера SVG на 0,0, который НЕ ЯВЛЯЕТСЯ верхним левым углом окна просмотра SVG. Чтобы обойти это, вы должны нарисовать свое SVG-изображение немного по-другому, чтобы дать Google то, что он хочет ... да, ответ в том, как вы фактически создаете путь SVG в своем редакторе SVG (Illustrator, Inkscape и т. Д. .).
Первый шаг - избавиться от viewBox. Это можно сделать, установив для viewBox в вашем XML значение 0 ... правильно, всего один ноль вместо обычных четырех аргументов для viewBox. Это отключает окно просмотра (и да, это семантически правильно). Вы, вероятно, сразу заметите скачок размера вашего изображения, когда вы это сделаете, и это потому, что у svg больше нет основы (viewBox) для масштабирования изображения. Таким образом, мы создаем эту ссылку напрямую, устанавливая ширину и высоту в соответствии с фактическим количеством пикселей, которое вы хотите, чтобы ваше изображение было в редакторе XML вашего редактора SVG.
Устанавливая ширину и высоту изображения svg в редакторе XML, вы создаете базовую линию для масштабирования изображения, и этот размер по умолчанию становится значением 1 для свойств масштаба маркера. Вы можете видеть преимущества этого для динамического масштабирования маркера.
Теперь, когда у вас есть размер вашего изображения, переместите изображение до тех пор, пока часть изображения, которую вы хотите иметь в качестве привязки, не окажется над координатами 0,0 редактора svg. Как только вы это сделаете, скопируйте значение атрибута d пути svg. Вы заметите, что около половины чисел отрицательны, что является результатом выравнивания точки привязки для 0,0 изображения вместо viewBox.
Использование этой техники позволит вам правильно повернуть маркер вокруг точки широты и долготы на карте. Это единственный надежный способ привязать точку на маркере SVG, которую вы хотите, к широте и долготе местоположения маркера.
Я попытался создать для этого JSFiddle , но в его реализации есть некоторая ошибка, одна из причин, по которой я не очень люблю переинтерпретированный код. Поэтому вместо этого я включил ниже полностью автономный пример, который вы можете попробовать, адаптировать и использовать в качестве справочника. Это тот же код, который я пробовал в JSFiddle, но он не удался, но он проходит через Firebug без единого хныканья.
<!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>
Это именно то, что Google делает для нескольких собственных символов, доступных в классе SYMBOL API Карт, поэтому, если это вас не убедит ... В любом случае, я надеюсь, что это поможет вам правильно создать и настроить маркер SVG для ваши карты Google endevours.