简体   繁体   English

在跟踪锚点的同时旋转符号

[英]Rotating symbols while keeping track of the anchor

I've just started testing out the new Symbol feature that was added in Google Maps API v3.9.我刚刚开始测试在 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).我以前拥有的是一组 png 图像,其中每个图像都是上一个图像的副本,只是旋转了 10 度(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:使用 SVG 路径符号,我定义了一个简单的三角形,并将其粘贴在一个 Marker 上,如下所示:

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.只要“rotationAngle”设置为 0,这就可以正常工作,因为我知道锚点必须是什么才能将符号放在地图中的正确位置。 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.我在考虑在形状周围画一个不可见的圆圈的可能性,这将确保画布大小保持不变,但我对 SVG 路径表示法不太熟悉,我不知道这是否可以实现。

Will be thankful for any constructive feedback on this matter.将感谢您对此事的任何建设性反馈。

Set your anchor to (10, 20).将您的锚点设置为 (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 fiddle工作小提琴

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map-canvas" style="border: 2px solid #3872ac;"></div>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM