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

问题描述：

我已经设置了红色文字标记，但我想明显地显示，如何每秒更改标记颜色（例如每秒红色和蓝色变化）？这可能吗？如何设置谷歌地图图标颜色每秒变化

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" 
});

任何帮助将不胜感激！？ andrew

答

Marker objects have 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

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

DEMO - 更新的多个标记

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

相关推荐