旋轉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); 
}