旋转自定义标记Google Maps API

Question

我到处都在寻找类似的东西，但是找不到任何帮助。 我已经搜索了Javscript的Google Maps API以寻求任何帮助，但是无法解决 。

我希望将标记每次点击旋转+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'}
        });

    };

编辑：

这里是我项目中所有代码的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'}
        });