如何设置谷歌地图图标每秒颜色变化答案

【问题标题】：how to set google map icon color change per second如何设置谷歌地图图标每秒颜色变化
【发布时间】：2014-04-27 07:32:48
【问题描述】：

我设置了红色文本标记，但我想清楚地显示，如何每秒更改标记颜色（例如每秒更改红色和蓝色）？这可能吗？

function createMarkerIcon(text, opt) {

   var defaultOptions = 
   {
     fontStyle: "normal", //normal, bold, italic
     fontName: "Arival",
     fontSize: 12, 
     bgColor: "#999999",
     fgColor: "white",
     padding: 4,
     arrowHeight: 6 
   };
   options = $.extend(defaultOptions, opt);

   var canvas = document.createElement("canvas"),
   context = canvas.getContext("2d");

   var font = options.fontStyle + " " + options.fontSize + "px " + 
                       options.fontName;
   context.font = font;
   var metrics = context.measureText(text);

   var w = metrics.width + options.padding * 2;

   var h = options.fontSize + options.padding * 2 +options.arrowHeight;
   canvas.width = w;
   canvas.height = h;

   context.beginPath();
   context.rect(0, 0, w, h - options.arrowHeight);
   context.fillStyle = options.bgColor;
   context.fill();

   context.beginPath();
   var x = w / 2, y = h, arwSz = options.arrowHeight;
   context.moveTo(x, y);
   context.lineTo(x - arwSz, y - arwSz);
   context.lineTo(x + arwSz, y - arwSz);
   context.lineTo(x, y);
   context.fill();

   context.textAlign = "center";
   context.fillStyle = options.fgColor;
   context.font = font;
   context.fillText(text,
       w / 2,
       (h - options.arrowHeight) / 2 + options.padding);

   return canvas.toDataURL();
}

marker = new google.maps.Marker({
                position: lat,
                map: map, 
                content: redloc[j][1],
                title: addressDetails[5],
                icon: createMarkerIcon(addressDetails[3], {
                    bgColor:"#FF0000"  })                
                //icon: "http://labs.google.com/ridefinder/images/mm_20_green.png"
});

任何帮助将不胜感激！？安德鲁

【问题讨论】：

标签： google-maps colors marker

【解决方案1】：

Marker 对象具有setIcon() 方法，可用于更改标记的图标。如果你想每x秒更换一次图标，那么你必须在setInterval()函数中调用setIcon()：

var color = "red";

setInterval(function() {
   if(color === "blue") {
      // set color red
      marker.setIcon(createMarkerIcon("some text", {
            bgColor:"#FF0000"  }));

      // If you have multiple markers, uncomment below and comment above
      /*for(var i = 0; i < markerArray.length; i++) {
          markerArray[i].setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
      }*/
      color = "red";
   } else {
      // set color blue
      marker.setIcon(createMarkerIcon("some text again", {
            bgColor:"#0900FF"  }));

      // If you have multiple markers, uncomment below and comment above
      /*for(var i = 0; i < markerArray.length; i++) {
         markerArray[i].setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
      }*/

      color = "blue";
   }
}, 1000 ); // every 1 second

您应该在定义 marker 之后添加它（或者如果您有多个标记，请在将创建的标记推送到标记数组后添加）。请注意，我使用您的createMarkerIcon() 作为setIcon() 的参数。

DEMO -- 针对多个标记进行了更新

【讨论】：