ฉันรู้ว่าโพสต์นี้เก่าไปหน่อย แต่ฉันได้เห็นข้อมูลที่ไม่ดีมากมายเกี่ยวกับเรื่องนี้ที่ SO จนฉันสามารถกรีดร้องได้ ดังนั้นฉันต้องโยนสองเซ็นต์ของฉันด้วยวิธีการที่แตกต่างกันโดยสิ้นเชิงที่ฉันรู้ว่าใช้ได้ผลเพราะฉันใช้มันได้อย่างน่าเชื่อถือในหลาย ๆ แผนที่ นอกจากนั้นฉันเชื่อว่า OP ต้องการความสามารถในการหมุนเครื่องหมายลูกศรรอบ ๆ จุดบนแผนที่เช่นกันซึ่งแตกต่างจากการหมุนไอคอนรอบแกน x, y ของตัวเองซึ่งจะเปลี่ยนตำแหน่งที่เครื่องหมายลูกศรชี้ไปบนแผนที่
อันดับแรกจำไว้ว่าเรากำลังเล่นกับ Google Maps และ 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
การใช้เทคนิคนี้จะช่วยให้คุณหมุนเครื่องหมายได้อย่างถูกต้องรอบ ๆ จุด lat และ lng บนแผนที่ นี่เป็นวิธีเดียวที่เชื่อถือได้ในการผูกจุดบนเครื่องหมาย svg ที่คุณต้องการกับ lat และความยาวของตำแหน่งเครื่องหมาย
ฉันพยายามสร้าง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 ของ Maps API ดังนั้นหากไม่ทำให้คุณเชื่อ ... อย่างไรก็ตามฉันหวังว่านี่จะช่วยให้คุณสร้างและตั้งค่าเครื่องหมาย SVG ได้อย่างถูกต้องสำหรับ แผนที่ Google ของคุณมีความพยายาม