在跟踪锚点的同时旋转符号 [英] Rotating symbols while keeping track of the anchor
问题描述
我刚开始测试新的符号功能，已添加到Google Maps API v3.9中。我想在地图上有多个类似三角形的符号，我希望能够以编程方式旋转它们。我之前所做的是一组png图像，每个图像都是最后一个图像的副本，旋转了10度（MyIcon_0，MyIcon_10，...，MyIcon350）。然后我会画出最接近我想要的旋转角度的图像。
使用新的符号功能似乎是一种更简单的方法，可以完全控制使用SVG路径符号，我定义了一个简单的三角形，并将其粘贴在如下的标记上：
var markerOptions = {
图标：{
路径：M 0 5 L 20 5 L 10 40 z，
rotation：rotationAngle，
anchor：[something]
}，
position：position
};
var marker = new Marker（markerOptions）;
只要将rotationAngle设置为0，此工作正常，因为我知道锚必须是为了将符号放在地图上的正确位置。我希望锚点始终位于三角形的锐角处。
当我有另一个旋转角度时会出现问题。该符号绘制在矩形画布上，并且画布的尺寸似乎自动计算以最适合内部形状。当你像这个三角形一样旋转一个符号时，你将有一个基于旋转的不同尺寸的画布，这使得很难在地图上正确定位符号，因为锚点似乎相对于画布尺寸进行了设置。
如果我只能控制实际画布的大小，我可以画出符号，以便锚点总是位于画布的中心，然后可以设置一个常量锚点。这是否有可能？我正在考虑在图形周围画一个看不见的圆的可能性，这将确保画布大小不变，但我对SVG路径符号不太熟悉，我不知道这是否可以实现。
感谢任何有关此事的富有建设性的反馈。 >将您的定位点设为（10，20）。
var icon = {
path：M 0 5 L 20 5 L 10 40 z，
比例：1，
strokeWeight：2，
fillColor：'＃009933'，
fillOpacity：0.001，
anchor：new google.maps.Point（10，20）
};
工作代码片段：
var map; var angle = 0; var marker; var icon = {path：M 0 5 L 20 5 L 10 40 z，scale：1，strokeWeight：2，fillColor：'＃009933'，fillOpacity：0.001，anchor： new google.maps.Point（10，20）}; function init（）{var startLatLng = new google.maps.LatLng（50.124462，-5.539994）; map = new google.maps.Map（document.getElementById（'map-canvas'），{center：startLatLng，zoom：12}）; var ptMarker = new google.maps.Marker（{position：new google.maps.LatLng（50.124462，-5.539994），map：map，icon：{url：https://maps.gstatic.com/intl/en_us/ mapfiles / markers2 / measle.png，size：new google.maps.Size（7，7），anchor：new google.maps.Point（4，4）}}）; marker = new google.maps.Marker（{position：new google.maps.LatLng（50.124462，-5.539994），icon：icon}）; marker.setMap（地图）; var circleMarker = new google.maps.Marker（{position：new google.maps.LatLng（50.124462，-5.539994），map：map，icon：{path：google.maps.SymbolPath.CIRCLE，scale：24，strokeWeight：2 ，fillColor：'＃009933'，fillOpacity：0.001，anchor：new google.maps.Point（0，0）}}）; setInterval（function（）{angle + = 30; icon.rotation = angle; marker.setIcon（icon）;}，1000）;} google.maps.event.addDomListener（window，'load'，init）;
html，body，＃map-canvas {height：100％;宽度：100％; margin：0px; < script src =https：//
I've just started testing out the new Symbol feature that was added in Google Maps API v3.9. I want to have multiple triangle-like symbols on the map, and I want to be able to rotate them programatically. What I previously had was a set of png images where each one was a copy of the last one, just rotated 10 degrees (MyIcon_0, MyIcon_10, ... , MyIcon350). I would then just draw the image that was closest to the rotation angle I wanted.
Using the new symbol feature instead seemed like a much easier way, that gave full control over both rotation and colors programatically.
Using the SVG path notation, I defined a simple triangle, and stuck it on a Marker like this:
var markerOptions = {
icon: {
path: "M 0 5 L 20 5 L 10 40 z",
rotation: rotationAngle,
anchor: [something]
},
position: position
};
var marker = new Marker(markerOptions);
This works fine as long as the "rotationAngle" is set to 0, because I then know what the anchor will have to be in order to put the symbol on the correct location in the map. I want the anchor to always be at the "acute angled corner" of the triangle.
The problem occurs when I have another rotation angle. The symbol is drawn on a rectangular canvas, and the dimensions of the canvas seems to be automatically calculated to best fit the shape inside. When you rotate a symbol like this triangle, you will have a canvas that has different dimensions based on the rotation, and this makes it hard to position the symbol correctly on the map, as the anchor seems to be set relatively to the canvas dimensions.
If I could only be able to control the size of the actual canvas I would be able to draw the symbol so that the anchor is always in the center of the canvas, and then it would be possible to set a constant anchor. Is this somehow possible? I was thinking about the possibility of drawing an invisible circle around the shape, that would make sure to keep the canvas size constant, but I am not too familiar with the SVG path notation, and I do not know if this is possible to achieve.
Will be thankful for any constructive feedback on this matter.
Set your anchor to (10, 20).
var icon = {
path: "M 0 5 L 20 5 L 10 40 z",
scale: 1,
strokeWeight: 2,
fillColor: '#009933',
fillOpacity: 0.001,
anchor: new google.maps.Point(10, 20)
};
working code snippet:
var map;
var angle = 0;
var marker;
var icon = {
path: "M 0 5 L 20 5 L 10 40 z",
scale: 1,
strokeWeight: 2,
fillColor: '#009933',
fillOpacity: 0.001,
anchor: new google.maps.Point(10, 20)
};
function init() {
var startLatLng = new google.maps.LatLng(50.124462, -5.539994);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: startLatLng,
zoom: 12
});
var ptMarker = new google.maps.Marker({
position: new google.maps.LatLng(50.124462, -5.539994),
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(4, 4)
}
});
marker = new google.maps.Marker({
position: new google.maps.LatLng(50.124462, -5.539994),
icon: icon
});
marker.setMap(map);
var circleMarker = new google.maps.Marker({
position: new google.maps.LatLng(50.124462, -5.539994),
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 24,
strokeWeight: 2,
fillColor: '#009933',
fillOpacity: 0.001,
anchor: new google.maps.Point(0, 0)
}
});
setInterval(function() {
angle += 30;
icon.rotation = angle;
marker.setIcon(icon);
}, 1000);
}
google.maps.event.addDomListener(window, 'load', init);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
这篇关于在跟踪锚点的同时旋转符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
