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

我刚刚开始测试Google Maps API v3.9中添加的新功能。我想在地图上有多个类似三角形的符号，并且我想能够通过编程来旋转它们。我之前拥有的是一组png图像，其中每一个都是上一个的副本，只是旋转了10度（MyIcon_0，MyIcon_10，…，MyIcon350）。然后我会画一个最接近我想要的旋转角度的图像

相反，使用新的符号功能似乎是一种更简单的方法，它可以通过编程完全控制旋转和颜色

使用SVG路径表示法，我定义了一个简单的三角形，并将其粘贴在如下标记上：

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);

只要“rotationAngle”设置为0，这就可以正常工作，因为这样我就知道锚定必须是什么，以便将符号放置在地图中的正确位置。我希望锚始终位于三角形的“锐角”

当我有另一个旋转角度时，问题就出现了。符号绘制在矩形画布上，画布的尺寸似乎会自动计算，以最适合内部形状。当您旋转类似于此三角形的符号时，画布将根据旋转具有不同的尺寸，这使得很难在地图上正确定位符号，因为锚点似乎是相对于画布尺寸设置的

如果我只能控制实际画布的大小，我就能够绘制符号，使锚定始终位于画布的中心，然后就可以设置一个恒定的锚定。这有可能吗？我在考虑是否可以在形状周围绘制一个不可见的圆，这将确保画布大小保持不变，但我对SVG路径表示法不太熟悉，我不知道这是否可能实现

感谢您对此事的任何建设性反馈。

将您的锚定为（10,20）

工作代码段：

var映射；
var角=0；
var标记；
变量图标={
路径：“M05L205L1040Z”，
比例：1，
冲程重量：2，
填充颜色：'#009933'，
不透明度：0.001，
主持人：新谷歌地图点（10,20）
};
函数init（）{
var startatlng=newgoogle.maps.LatLng（50.124462，-5.539994）；
map=new google.maps.map（document.getElementById（'map-canvas'）{
中心：惊人，
缩放：12
});
var ptMarker=new google.maps.Marker({
位置：新google.maps.LatLng（50.124462，-5.539994），
地图：地图，
图标：{
url:“https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
大小：新谷歌地图大小（7,7），
主播：新google.maps.Point（4,4）
}
});
marker=新的google.maps.marker({
位置：新google.maps.LatLng（50.124462，-5.539994），
图标：图标
});
marker.setMap（map）；
var circleMarker=new google.maps.Marker({
位置：新google.maps.LatLng（50.124462，-5.539994），
地图：地图，
图标：{
路径：google.maps.SymbolPath.CIRCLE，
比例：24，
冲程重量：2，
填充颜色：'#009933'，
不透明度：0.001，
锚：新的google.maps.Point（0,0）
}
});
setInterval（函数（）{
角度+=30；
图标旋转=角度；
marker.setIcon（图标）；
}, 1000);
}
google.maps.event.addDomListener（窗口'load'，init）
html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

将锚定设置为（10,20）


工作代码段：


var映射；
var角=0；
var标记；
变量图标={
路径：“M05L205L1040Z”，
比例：1，
冲程重量：2，
填充颜色：'#009933'，
不透明度：0.001，
主持人：新谷歌地图点（10,20）
};
函数init（）{
var startatlng=newgoogle.maps.LatLng（50.124462，-5.539994）；
map=new google.maps.map（document.getElementById（'map-canvas'）{
中心：惊人，
缩放：12
});
var ptMarker=new google.maps.Marker({
位置：新google.maps.LatLng（50.124462，-5.539994），
地图：地图，
图标：{
url:“https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
大小：新谷歌地图大小（7,7），
主播：新google.maps.Point（4,4）
}
});
marker=新的google.maps.marker({
位置：新google.maps.LatLng（50.124462，-5.539994），
图标：图标
});
marker.setMap（map）；
var circleMarker=new google.maps.Marker({
位置：新google.maps.LatLng（50.124462，-5.539994），
地图：地图，
图标：{
路径：google.maps.SymbolPath.CIRCLE，
比例：24，
冲程重量：2，
填充颜色：'#009933'，
不透明度：0.001，
锚：新的google.maps.Point（0,0）
}
});
setInterval（函数（）{
角度+=30；
图标旋转=角度；
marker.setIcon（图标）；
}, 1000);
}
google.maps.event.addDomListener（窗口'load'，init）
html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

多段线上的矢量路径必须位于22x22px的正方形内，因此，如果您的不可见圆半径为，感谢您的评论！我使用的不是多段线，而是标记。我尝试使用我的符号的一个非常小的版本（小于22x22px），以查看是否会使所有符号的大小都为22x22px，但画布仍然设置得足够大以适合符号。（12x8px、15x14px等，基于旋转）。因为我仍然不知道是否有可能在可见三角形的同一符号中插入一个不可见的圆。您知道是否可以在同一画布上设置多个符号吗？（一个用于我的三角形，一个用于不可见圆）多段线上可能的向量路径副本必须位于22x22px的正方形内，因此如果不可见圆半径为，感谢您的评论！我使用的不是多段线，而是标记。我试着用一个很小的盒子
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)
    };