Tôi biết bài viết này hơi cũ, nhưng tôi đã thấy quá nhiều thông tin xấu về điều này tại SO khiến tôi có thể hét lên. Vì vậy, tôi phải ném hai xu của mình vào với một cách tiếp cận hoàn toàn khác mà tôi biết là hiệu quả, vì tôi sử dụng nó một cách đáng tin cậy trên nhiều bản đồ. Bên cạnh đó, tôi tin rằng OP cũng muốn có khả năng xoay điểm đánh dấu mũi tên xung quanh điểm bản đồ, điều này khác với việc xoay biểu tượng xung quanh trục x, y của chính nó, điều này sẽ thay đổi vị trí điểm đánh dấu mũi tên chỉ đến trên bản đồ.
Đầu tiên, hãy nhớ rằng chúng ta đang chơi với Google maps và SVG, vì vậy chúng ta phải xác định cách thức mà Google triển khai việc triển khai SVG cho các điểm đánh dấu (hoặc thực sự là các biểu tượng). Google đặt neo của nó cho hình ảnh điểm đánh dấu SVG ở 0,0 KHÔNG PHẢI là góc trên bên trái của khung xem SVG. Để giải quyết vấn đề này, bạn phải vẽ hình ảnh SVG của mình khác đi một chút để cung cấp cho Google những gì nó muốn ... vâng, câu trả lời là ở cách bạn thực sự tạo đường dẫn SVG trong trình chỉnh sửa SVG của mình (Illustrator, Inkscape, v.v. .).
Bước đầu tiên là thoát khỏi viewBox. Điều này có thể được thực hiện bằng cách đặt viewBox trong XML của bạn thành 0 ... đúng vậy, chỉ là một số 0 thay vì bốn đối số thông thường cho viewBox. Thao tác này sẽ tắt hộp chế độ xem (và vâng, điều này đúng về mặt ngữ nghĩa). Bạn có thể sẽ nhận thấy kích thước hình ảnh của bạn nhảy vọt ngay lập tức khi bạn làm điều này, và đó là bởi vì svg không còn cơ sở (khung xem) để chia tỷ lệ hình ảnh. Vì vậy, chúng tôi tạo tham chiếu đó trực tiếp, bằng cách đặt chiều rộng và chiều cao thành số pixel thực tế mà bạn muốn hình ảnh của mình nằm trong trình soạn thảo XML của trình soạn thảo SVG của bạn.
Bằng cách đặt chiều rộng và chiều cao của hình ảnh svg trong trình soạn thảo XML, bạn tạo đường cơ sở để chia tỷ lệ hình ảnh và kích thước này trở thành giá trị 1 cho các thuộc tính tỷ lệ điểm đánh dấu theo mặc định. Bạn có thể thấy lợi thế của điều này đối với tỷ lệ động của điểm đánh dấu.
Bây giờ bạn đã có kích thước hình ảnh của mình, hãy di chuyển hình ảnh cho đến khi phần hình ảnh bạn muốn có làm mỏ neo nằm trên 0,0 tọa độ của trình chỉnh sửa svg. Khi bạn đã thực hiện xong việc này, hãy sao chép giá trị của thuộc tính d của đường dẫn svg. Bạn sẽ nhận thấy khoảng một nửa số là số âm, đó là kết quả của việc căn chỉnh điểm neo của bạn cho 0,0 của hình ảnh thay vì viewBox.
Sử dụng kỹ thuật này sau đó sẽ cho phép bạn xoay điểm đánh dấu một cách chính xác, xung quanh điểm vĩ độ và điểm l trên bản đồ. Đây là cách đáng tin cậy duy nhất để liên kết điểm trên điểm đánh dấu svg mà bạn muốn với vĩ độ và độ dài của vị trí điểm đánh dấu.
Tôi đã cố gắng tạo JSFiddle cho việc này , nhưng có một số lỗi trong việc triển khai ở đó, một trong những lý do khiến tôi không thích mã được diễn giải lại. Vì vậy, thay vào đó, tôi đã bao gồm một ví dụ hoàn toàn độc lập bên dưới mà bạn có thể thử, điều chỉnh và sử dụng làm tài liệu tham khảo. Đây là mã tương tự mà tôi đã thử tại JSFiddle nhưng không thành công, nhưng nó chạy qua Firebug mà không có tiếng kêu.
<!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>
Đây chính xác là những gì Google làm cho một số ký hiệu có sẵn trong lớp SYMBOL của API Maps, vì vậy nếu điều đó không thuyết phục được bạn ... Dù sao, tôi hy vọng điều này sẽ giúp bạn tạo và thiết lập chính xác điểm đánh dấu SVG cho Google maps endevours của bạn.