Saya tahu posting ini agak tua, tetapi saya telah melihat begitu banyak informasi buruk tentang ini di SO sehingga saya bisa berteriak. Jadi saya hanya perlu mengeluarkan dua sen saya dengan pendekatan berbeda yang saya tahu berhasil, karena saya menggunakannya dengan andal di banyak peta. Selain itu, saya yakin OP menginginkan kemampuan untuk memutar penanda panah di sekitar titik peta juga, yang berbeda dengan memutar ikon di sekitar sumbu x, y miliknya sendiri yang akan mengubah tempat yang ditunjuk oleh penanda panah pada peta.
Pertama, ingat kita bermain dengan peta Google dan SVG, jadi kita harus mengakomodasi cara Google menyebarkan penerapan SVG untuk penanda (atau sebenarnya simbol). Google menetapkan jangkarnya untuk gambar penanda SVG di 0,0 yang BUKAN di sudut kiri atas kotak tampilan SVG. Untuk menyiasati ini, Anda harus menggambar gambar SVG Anda sedikit berbeda untuk memberikan Google apa yang diinginkannya ... ya jawabannya adalah cara Anda membuat jalur SVG di editor SVG Anda (Illustrator, Inkscape, dll. .).
Langkah pertama, adalah menyingkirkan viewBox. Ini bisa dilakukan dengan menyetel viewBox di XML Anda ke 0 ... itu benar, hanya satu nol daripada empat argumen biasa untuk viewBox. Ini mematikan kotak tampilan (dan ya, ini benar secara semantik). Anda mungkin akan melihat ukuran gambar Anda melonjak dengan cepat ketika Anda melakukan ini, dan itu karena svg tidak lagi memiliki basis (kotak tampilan) untuk menskalakan gambar. Jadi kami membuat referensi itu secara langsung, dengan menyetel lebar dan tinggi ke jumlah piksel sebenarnya yang Anda inginkan untuk gambar Anda ada di editor XML editor SVG Anda.
Dengan mengatur lebar dan tinggi gambar svg di editor XML Anda membuat garis dasar untuk penskalaan gambar, dan ukuran ini menjadi nilai 1 untuk properti skala penanda secara default. Anda dapat melihat keuntungan yang dimilikinya untuk penskalaan dinamis marker.
Sekarang Anda memiliki ukuran gambar Anda, pindahkan gambar sampai bagian gambar yang ingin Anda miliki sebagai jangkar berada di atas koordinat 0,0 dari editor svg. Setelah Anda melakukan ini salin nilai atribut d dari jalur svg. Anda akan melihat sekitar setengah dari angka-angka itu negatif, yang merupakan hasil dari menyelaraskan titik jangkar Anda untuk 0,0 gambar, bukan kotak tampilan.
Menggunakan teknik ini akan memungkinkan Anda memutar penanda dengan benar, di sekitar titik lintang dan ujung pada peta. Ini adalah satu-satunya cara yang dapat diandalkan untuk mengikat titik pada penanda svg yang Anda inginkan ke lintang dan bujur dari lokasi penanda.
Saya mencoba membuat JSFiddle untuk ini , tetapi ada beberapa bug dalam penerapannya, salah satu alasan saya tidak begitu menyukai kode yang ditafsirkan ulang. Jadi sebagai gantinya, saya telah menyertakan contoh lengkap di bawah ini yang dapat Anda coba, adaptasi, dan gunakan sebagai referensi. Ini adalah kode yang sama yang saya coba di JSFiddle yang gagal, namun kode ini melewati Firebug tanpa rengekan.
<!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>
Ini persis seperti yang dilakukan Google untuk beberapa simbolnya sendiri yang tersedia di kelas SYMBOL dari Maps API, jadi jika itu tidak meyakinkan Anda ... Bagaimanapun, saya harap ini akan membantu Anda membuat dan menyiapkan penanda SVG dengan benar untuk peta Google Anda bertahan lama.