更改Google地图中的标记图标选项 [英] Change marker icon options in google maps

问题描述

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

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

  var icon = {
 path：google.maps.SymbolPath .FORWARD_CLOSED_ARROW，
比例：4，
 fillColor：＃ff5050，//<  - 我想在创建后改变它
 fillOpacity：1，
 strokeWeight：1 ，
 rotation：0 //<  - 我想在创建
之后更改它; 
 
 var markerOptions =< google.maps.MarkerOptions> {
 map：this.map，
 icon：icon，
}; 
  

任何人都知道吗？

解决方案

在标记上调用 .setIcon 适用于我：

  setInterval（function（）{
 angle + = 30; 
 c ++ ++; 
 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，//< - 我想在创建后更改fillOpacity： 1，strokeWeight：1，anchor：new google.maps.Point（0，5），rotation：0 //< - 我想在创建后改变它}; var colorArray = [＃ff0000，＃00FF00 ，＃0000FF，＃FFFF00，＃00FFFF，＃FF00FF]; var cnt = 0;函数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（地图）; 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％;宽度：100％; margin：0px; < script src =https：//

I use this code to create my markers (TypeScript btw) The options for the icon allows me to rotate and set a fill color of the marker. But how can I change the fill color and rotation after creation?

I have found various responses here on SO, but they refer to changing the icon to a bitmap and swap between red and green bitmaps for example. Which is not what I want.

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

Anyone know?

解决方案

Calling .setIcon on the marker works for me:

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

working fiddle

working code snippet:

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>

这篇关于更改Google地图中的标记图标选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！