更改谷歌地图中的标记图标

我使用此代码来创建我的标记（TypeScript btw）该图标的选项允许我旋转并设置标记的填充颜色。但是如何在创建后更改填充颜色和旋转？更改谷歌地图中的标记图标

我在这里发现了各种不同的响应，但它们指的是将图标更改为位图并在红色和绿色位图之间交换。这不是我想要的。

 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, 
     };

有人知道吗？

来源

2015-05-10 Roger Johansson

相关问题：[旋转符号，而跟踪Ø f锚]（http://stackoverflow.com/questions/12472637/rotating-symbols-while-keeping-track-of-the-anchor） – geocodezip

上的标记调用.setIcon工作对我来说：

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

working fiddle

工作代码片段：

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>

来源

2015-05-10 16:09:33 geocodezip

更改谷歌地图中的标记图标

回答

相关问题