旋转SVG在中心的谷歌地图自定义图标

Question

我有一个谷歌地图上绘制一个旋转图标验证码：

function createMarker(device) { 
     var wtf = new google.maps.Marker({ 
     map: window.map_, 
     position: new google.maps.LatLng(device.lat, device.lng), 
     icon: { 
      path: 'M350,0 700,700 350,550 0,700', 
      fillColor: "limegreen", 
      fillOpacity: 0.8, 
      scale: 0.04, 
      strokeColor: 'limegreen', 
      strokeWeight: 1, 
      anchor: new google.maps.Point(800, 800), 
      rotation: device.head, 
     } 
     }); 
     return wtf; 
} 

的问题是旋转的SVG的一个角旋转 - 不中心。我发现svg路径在某处，通过反复试验缩放它，然后猜对锚点。当我添加标签时，而不是图标下方的标签，这些标签全部搞乱了。标签使用与标记相同的纬度/经度。

见例如：

我发现它不可能得到旋转“当场”标签上方的图标。任何想法如何让这个工作？谢谢

Answer 1

这并不理想，但它工作正常。这是TypeScript代码。在TypeScript中写入后，你不能回到JavaScript，这太痛苦了。

由于pos是一个经纬度：

let pos = new this.google.maps.LatLng(lat, lng); 

方法：

public createMarker(heading: number, pos: any) { 
    let marky = new this.google.maps.Marker({ 
     position: pos, 
     map: this.google_map, 
     icon: { 
      path: this.google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
      fillOpacity: 1, 
      fillColor: 'orange', 
      strokeWeight: 1.5, 
      scale: 2, 
      strokeColor: 'darkblue', 
      rotation: heading, 
      anchor: this.getRotation(heading), 
     }, 
    }); 
    return marky; 
} 

public createLabel(name: string, pos: any) { 
    let label = new MapLabel({ 
     text: name, 
     position: pos, 
     map: this.google_map, 
     fontSize: 17, 
     fontColor: 'darkred', 
     align: 'center' 
    }); 
    return label; 
} 

public getRotation(angle: number) { 
    if (angle <= 30) return new this.google.maps.Point(0, 5); 
    if (angle <= 45) return new this.google.maps.Point(0, 5); 
    if (angle <= 60) return new this.google.maps.Point(2, 4); 
    if (angle <= 120) return new this.google.maps.Point(3, 0); 
    if (angle <= 150) return new this.google.maps.Point(0, 0); 
    if (angle <= 210) return new this.google.maps.Point(0, 0); 
    if (angle <= 220) return new this.google.maps.Point(-1, 0); 
    if (angle <= 240) return new this.google.maps.Point(-3, 0); 
    if (angle <= 280) return new this.google.maps.Point(-3, -3); 
    return new this.google.maps.Point(0, 5); 
}