更改Google地图中的标记图标选项

Question

我使用此代码创建标记（TypeScript btw）图标的选项使我可以旋转并设置标记的填充颜色。 但是创建后如何更改填充颜色和旋转度？

我在SO上找到了各种响应，但是它们涉及将图标更改为位图，例如在红色和绿色位图之间交换。 这不是我想要的。

        var icon = {
            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
            scale: 4,
            fillColor: "#ff5050", //<-- I want to change this after creation
            fillOpacity: 1,
            strokeWeight: 1,
            rotation: 0 //<-- I want to change this after creation
        };

        var markerOptions = <google.maps.MarkerOptions>{               
            map: this.map,                
            icon: icon,
        };

有人知道吗

Answer 1

在标记上调用.setIcon对我有用 ：

setInterval(function () {
    angle += 30;
    cnt++;
    icon.rotation = angle;
    icon.fillColor = colorArray[cnt % colorArray.length]
    marker.setIcon(icon);
}, 1000);

工作小提琴

工作代码段：

 var map; var angle = 0; var marker; var icon = { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, scale: 4, fillColor: "#ff5050", //<-- I want to change this after creation fillOpacity: 1, strokeWeight: 1, anchor: new google.maps.Point(0, 5), rotation: 0 //<-- I want to change this after creation }; var colorArray = ["#ff0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF"]; var cnt = 0; function init() { var startLatLng = new google.maps.LatLng(50.124462, -5.539994); map = new google.maps.Map(document.getElementById('map-canvas'), { center: startLatLng, zoom: 12 }); var ptMarker = new google.maps.Marker({ position: new google.maps.LatLng(50.124462, -5.539994), map: map, icon: { url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", size: new google.maps.Size(7, 7), anchor: new google.maps.Point(4, 4) } }); marker = new google.maps.Marker({ position: new google.maps.LatLng(50.124462, -5.539994), icon: icon }); marker.setMap(map); var circleMarker = new google.maps.Marker({ position: new google.maps.LatLng(50.124462, -5.539994), map: map, icon: { path: google.maps.SymbolPath.CIRCLE, scale: 24, strokeWeight: 2, fillColor: '#009933', fillOpacity: 0.001, anchor: new google.maps.Point(0, 0) } }); setInterval(function () { angle += 30; cnt++; icon.rotation = angle; icon.fillColor = colorArray[cnt % colorArray.length] marker.setIcon(icon); }, 1000); } google.maps.event.addDomListener(window, 'load', init); 

 html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas" style="border: 2px solid #3872ac;"></div>