旋转自定义标记Google Maps API

时间:2017-08-01 11:53:12

标签: javascript google-maps google-maps-api-3

我一直在寻找类似的东西,但找不到任何帮助。我已经在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。

2 个答案:

答案 0 :(得分:3)

试试这个:

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

    rotation += 5;

    icon.rotation = rotation;

    marker.setIcon(icon);
});

答案 1 :(得分:0)

试试这个,

Version : 1707 
Build : 7766.2099