Javascript 标记+；标签旋转-谷歌地图API v3

我使用一个SVG路径作为标记图标，并尝试根据它的方向旋转它。图标旋转正确，但一旦图标旋转，我似乎无法对齐标签。有办法吗

正如您所看到的，固定标记（5060）没有旋转，因此我可以将标签对准中心，但当我根据航向旋转它时，它使用左下角作为定位点，而不是中心。标签本身也没有旋转，只是图像（1705784）

更新：

---

工作示例

要将文本保留在图标上，需要适当地设置labelOrigin。对于你的箭（至少是小提琴中的那支），我认为（20,30）的值适用：

var icon = {
  path: path,
  fillColor: 'rgb(79, 151, 240)',
  labelOrigin: new google.maps.Point(25,30), // labelOrigin,
  fillOpacity: 1,
  scale: scale,
  strokeColor: 'white',
  strokeWeight: 1,
  rotation: rotation,
}
var Marker = new google.maps.Marker({
  position: new google.maps.LatLng(Vehicle.Latitude, Vehicle.Longitude),
  map: TrackingMap,
  title: Vehicle.Name,
  label: {
    text: Vehicle.Name,
    color: 'white',
    fontSize: fontSize,
    fontWeight: 'bold',
    fontFamily: '"Roboto", sans-serif',
    labelClass: 'TrackingMapLabel',
    background: 'blue'
  },

  icon: icon,
  // anchor: new google.maps.Point(500,500),
});

代码片段：

var车辆列表=[{
姓名：“76”，
纬度：37.020423，
经度：-94.534732，
地点：“美国密苏里州乔普林市I-44号，邮编64804”，
ActivityDateTime:“2017-06-26T07:24:09.167”，
完整活动：{
ActivityDateTime:“2017-06-26T07:24:09.167”，
纬度：37.020423，
经度：-94.534732，
GPSValid：是的，
现场时间：4846，
地点：“美国密苏里州乔普林市I-44号，邮编64804”，
引燃：对，
HDG:216，
速度：111，
事件子类型：“SMDP\u事件\u时间\u或距离”，
增量距离：“9.4”，
里程表：“112580.203125”，
TripDistance:“135.2”，
接收日期：“2017-06-26T07:24:04.477”，
自定义类型：-1，
最高速度：111，
isunauthorized:false，
HDOP：“0.80”，
NumSatellites:11，
客户描述：“，
自定义数据：“”，
越野米数：122.90157756779，
轴承：61度，
地点类型：1，
NamedArea：“未定义”，
事件优先级：“低”，
版本：0，
二等兵：错，
通讯频道：“手机”，
EventTypeDescription:“定时更新”
}
}];
var跟踪图；
var TrackingMapCenter={
纬度：37.020423，
液化天然气：-94.534732
};
var TrackingMapZoom=5；
函数initTrackingMap（）{
TrackingMap=new google.maps.Map（document.getElementById（'tracking-Map'）{
中心：TrackingMapCenter，
缩放：跟踪贴图缩放，
mapTypeId:'混合'
});
}
initTrackingMap（）；
功能设置标记（车辆列表）{
对于（i=0；i0）？路径箭头比例：（Vehicle.FullActivity.IgnitionOn）？路径圆圈比例：路径平方比例；
var旋转=（Vehicle.FullActivity.Speed>0）？-90+Vehicle.FullActivity.HDG:（Vehicle.FullActivity.IgnitionOn）？0:0；
var labelOrigin=（Vehicle.FullActivity.Speed>0）？新建google.maps.Point（0,0）：（Vehicle.FullActivity.IgnitionOn）？新建google.maps.Point（220,220）：新建google.maps.Point（220,220）；
var fontSize=（Vehicle.FullActivity.Speed>0）？'12px'：（Vehicle.FullActivity.IgnitionOn）？'10px'：'10px'；
变量图标={
路径：路径，
fillColor:'rgb（79151240）'，
labelOrigin:new google.maps.Point（25,30），//labelOrigin，
不透明度：1，
比例：比例，
strokeColor:'白色'，
冲程重量：1，
旋转：旋转，
}
var Marker=new google.maps.Marker({
位置：新google.maps.LatLng（车辆.纬度，车辆.经度），
地图：追踪地图，
标题：车辆名称，
标签：{
文本：车辆名称，
颜色：'白色'，
fontSize:fontSize，
fontWeight:'粗体'，
fontFamily:'机器人'，无衬线'，
labelClass:'TrackingMapLabel'，
背景：“蓝色”
},
图标：图标，
//主播：新google.maps.Point（500500），
});
google.maps.event.addListener（标记，'单击'，（函数（标记，内容字符串，信息窗口）{
返回函数（）{
setContent（contentString）；
信息窗口。打开（跟踪地图、标记）；
};
})（标记、内容字符串、信息窗口）；
setInterval（函数（）{
var icon=Marker.getIcon（）；
图标旋转+=10；
icon.rotation%=360；
Marker.setIcon（图标）；
}, 1000);
}
}
设置标记（车辆列表）

请提供一个示例来演示添加的JSFIDLE示例中的问题（包括SVG路径和一些示例数据），看起来标签文本不支持旋转。你需要旋转文本吗？还是在箭里面？谢谢你。如果你能想出如何旋转它们，那就太好了
var icon = {
  path: path,
  fillColor: 'rgb(79, 151, 240)',
  labelOrigin: new google.maps.Point(25,30), // labelOrigin,
  fillOpacity: 1,
  scale: scale,
  strokeColor: 'white',
  strokeWeight: 1,
  rotation: rotation,
}
var Marker = new google.maps.Marker({
  position: new google.maps.LatLng(Vehicle.Latitude, Vehicle.Longitude),
  map: TrackingMap,
  title: Vehicle.Name,
  label: {
    text: Vehicle.Name,
    color: 'white',
    fontSize: fontSize,
    fontWeight: 'bold',
    fontFamily: '"Roboto", sans-serif',
    labelClass: 'TrackingMapLabel',
    background: 'blue'
  },

  icon: icon,
  // anchor: new google.maps.Point(500,500),
});