旋轉自定義標記谷歌地圖API

Question

我一直在尋找類似的東西，但找不到任何幫助。我已經搜索了Google Maps API for Javscript的任何幫助，但我無法解決。

我正在尋找簡單地旋轉標記+5度每次點擊，但似乎無法弄清楚。我期待通過更改fillColor來做同樣的事情，但是我確定我可以弄清楚，如果輪換不是太不同的話。

JAVASCRIPT：

function addMarkerUpstream() { 

     var upstreamIcon = { 
      path: 'M28.6,17.5L16.1,4.9l0,0 c-0.1-0.1-0.2-0.2-0.3-0.2c0,0-0.1,0-0.1-0.1c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3,0 c0,0,0,0,0,0l0,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0-0.1,0.1 c-0.1,0.1-0.2,0.1-0.3,0.2c0,0,0,0,0,0l0,0c0,0,0,0,0,0L1,17.5l0,0c-0.7,0.7-0.7,1.8,0,2.5s1.8,0.7,2.5,0l9.6-9.6 c0,6.7,0,34.2,0,34.2c0,1,0.8,1.7,1.7,1.7s1.7-0.8,1.7-1.7V10.4l9.6,9.6c0.7,0.7,1.8,0.7,2.5,0S29.3,18.2,28.6,17.5z', 
      fillColor: '#fbb040', 
      fillOpacity: 1, 
      scale: 1.5, 
      strokeColor: '#000', 
      strokeWeight: 0.5, 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(15, 50), 
      rotation: 0, 
     } 

     var marker = new google.maps.Marker({ 
      position: map.center, 
      map: map, 
      title: 'Upstream', 
      draggable: true, 
      icon: upstreamIcon 
     }); 

     latLang = marker.getPosition(); 

     marker.setMap(map); 

     //ROTATION 
     $("#rotate").click(function() { 
      upstreamIcon.setProperty({rotation:+5}); 
     }); 

     //FILL COLOR 
     $("#fill_red").click(function() { 
      upstreamIcon = { fillColor: 'red'} 
     }); 

    }; 

編輯：

HERE是在我的項目的所有代碼的jsfiddle。

Answer 1

試試這個：

$("#rotate").click(function() { 
    var icon = marker.getIcon(); 
    var rotation = icon.rotation; 

    rotation += 5; 

    icon.rotation = rotation; 

    marker.setIcon(icon); 
}); 

Answer 2

嘗試這樣，

function addMarkerUpstream() { 
     var rotate = 0; 
     var upstreamIcon = { 
      path: 'M28.6,17.5L16.1,4.9l0,0 c-0.1-0.1-0.2-0.2-0.3-0.2c0,0-0.1,0-0.1-0.1c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3,0 c0,0,0,0,0,0l0,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0-0.1,0.1 c-0.1,0.1-0.2,0.1-0.3,0.2c0,0,0,0,0,0l0,0c0,0,0,0,0,0L1,17.5l0,0c-0.7,0.7-0.7,1.8,0,2.5s1.8,0.7,2.5,0l9.6-9.6 c0,6.7,0,34.2,0,34.2c0,1,0.8,1.7,1.7,1.7s1.7-0.8,1.7-1.7V10.4l9.6,9.6c0.7,0.7,1.8,0.7,2.5,0S29.3,18.2,28.6,17.5z', 
      fillColor: '#fbb040', 
      fillOpacity: 1, 
      scale: 1.5, 
      strokeColor: '#000', 
      strokeWeight: 0.5, 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(15, 50), 
      rotation: rotate, 
     } 

     var marker = new google.maps.Marker({ 
      position: map.center, 
      map: map, 
      title: 'Upstream', 
      draggable: true, 
      icon: upstreamIcon 
     }); 

     latLang = marker.getPosition(); 

     marker.setMap(map); 

     //ROTATION 
     $("#rotate").click(function() { 
     rotate = rotate + 5; 
     upstreamIcon.{ rotation: rotate }; // Try like this 
     }); 

     //FILL COLOR 
     $("#fill_red").click(function() { 
      upstreamIcon = { fillColor: 'red'} 
     });