как установить изменение цвета значка карты Google в секунду

я установил красный текстовый маркер, но я хочу показать, как изменить цвет маркера в секунду (например, красный и синий меняются в секунду)? Это возможно?

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
person andrewarnier    schedule 02.04.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Marker объекты имеют setIcon() метод, который можно использовать для изменения значка маркера. Если вы хотите менять значок каждые x секунд, вы должны вызвать setIcon() в функции setInterval():

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().

ДЕМО -- ОБНОВЛЕНО ДЛЯ НЕСКОЛЬКИХ МАРКЕРОВ

person alpakyol    schedule 02.04.2014