Открытие информационного окна Google Maps на основе определенных критериев

Я хочу открыть Карты Google InfoWindow в зависимости от того, подается ли в одном из моих зданий сигнал тревоги. Все здания, на которых у меня есть маркеры, имеют состояние тревоги (включено или выключено), и если они находятся в состоянии тревоги, я меняю цвет маркера на желтый или красный, в зависимости от серьезности тревоги. Когда сигналы тревоги "красные", маркер анимируется с эффектом google.maps.Animation.BOUNCE.

Эффекта отскока иногда недостаточно, чтобы привлечь внимание (мы оставляем этот экран открытым на стене, а данные в $(this).children(".alarm-count") div ниже динамически меняются из-за другого скрипта, запущенного на сайте в фоновом режиме.

Я уже знаю, как менять маркеры в зависимости от состояния тревоги. Могу ли я также открыть информационное окно в том же состоянии? Я пробовал это:

        google.maps.event.addListener(map,'idle',(function(marker,i){
            return function(){
                infowindow.setContent(

                    '<div class="infowindow-inner">'+
                        '<a href="'+bldgGfx[i]+'" onclick="window.open('+bldgGfx[i]+');return false;" target="_blank" title="'+bldgName[i]+' ('+bldgAddr[i]+')">'+
                            '<h2>'+bldgName[i]+'</h2>'+
                            '<h4>'+bldgAddr[i]+'</h4>'+
                            '<p>'+mainMeter[i]+' kW</p>'+
                            '<p>'+alarmCount[i]+' Alarms</p>'+
                    '</div>'

                );infowindow.open(map,marker);
            }
        })(marker,i));

но, похоже, это не работает.

Короче говоря, мне нужно оценить одно значение для каждого маркера на моей странице и открыть (или не открывать) информационное окно для каждого здания на основе этого значения.

Вот мой код:

$(".building").each(function(i){

    bldgNo[i] = $(this).children(".bldg-no").html().slice(1);
    bldgName[i] =   $(this).children(".bldg-name").html();
    bldgAddr[i] =   $(this).children(".bldg-address").html();
    bldgGfx[i] =    $(this).children(".bldg-graphic").html();
    mainMeter[i] =  $(this).children(".main-meter").html();
    alarmCount[i] = $(this).children(".alarm-count").html();
    latitude[i] =   $(this).children(".latitude").html();
    longitude[i] =  $(this).children(".longitude").html();

    if (alarmCount[i]!="N/A"){alarmCount[i]=alarmCount[i].slice(0,-3);}
    if (alarmCount[i]>"0" && alarmCount[i]!="N/A"){
        marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:redIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.BOUNCE);


    ////    
    //// THE COMMAND TO OPEN THE INFOWINDOW WILL GO HERE, RIGHT?
    ////


    }
    else if ($(this).hasClass("new")||(mainMeter[i]=="N/A")||(!isNumber(mainMeter[i]))) {
        marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:yellowIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.NULL);}
    else {
        marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:greenIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.NULL);}

    markersArray.push(marker);
    google.maps.event.addListener(marker,'click',(function(marker,i){
        return function(){
            infowindow.setContent(

                '<div class="infowindow-inner">'+
                    '<a href="'+bldgGfx[i]+'" onclick="window.open('+bldgGfx[i]+');return false;" target="_blank" title="'+bldgName[i]+' ('+bldgAddr[i]+')">'+
                        '<h2>'+bldgName[i]+'</h2>'+
                        '<h4>'+bldgAddr[i]+'</h4>'+
                        '<p>'+mainMeter[i]+' kW</p>'+
                        '<p>'+alarmCount[i]+' Alarms</p>'+
                '</div>'

            );infowindow.open(map,marker);
        }
    })(marker,i));

    i++;

});

google-maps conditional-statements google-maps-api-3 infowindow
person InterfaceGuy    schedule 16.07.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Поскольку многие здания могут быть "в состоянии готовности", вам понадобится массив InfoWindow (в моей демонстрации он глобальный, потому что я использую встроенный вызов); однако экран может очень легко загромождать. Я написал подпрограмму Z-Index, чтобы вывести на передний план нажатое InfoWindow. Вы также можете рассмотреть MarkerWithLabel или InfoBubble, потому что, на мой взгляд, они выглядят лучше, чем ванильное InfoWindow.

Пожалуйста, посмотрите демо

демонстрация рядом с кодом

Я скопирую только некоторые части, которые сильно отличаются.

var infowindows = [];

function initialize() {
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  // MANY LINES SKIPPED
  // ...

  $(this).children(".longitude").html();

  infowindows[i] = new google.maps.InfoWindow({
      content:'<div class="infowindow"
         onclick="bringToFront('+i+')">'+bldgName[i]+'</div>'});

  if (alarmCount[i]>0 && alarmCount[i]!="N/A"){
  //      marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:redIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.BOUNCE);

    marker = new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,title:"red"});

    infowindows[i].open(map,marker);

  //// THE COMMAND TO OPEN THE INFOWINDOW WILL GO HERE, RIGHT?
}

...

google.maps.event.addListener(marker,'click',(function(marker,i){
      return function(){
        infowindows[i].open(map,marker);
        bringToFront(i);
      }
    })(marker,i));
  });
}

function bringToFront(windowIndex) {
  console.log(windowIndex);
  for (var i = infowindows.length-1, n = 0; i >= n; i--) {
    infowindows[i].setZIndex(0);
  }
  infowindows[windowIndex].setZIndex(1);
}
person Heitor Chang    schedule 17.07.2012
comment
Отлично! Это сработало отлично! Большое спасибо, Эйтор. Извините за задержку; появились другие вещи, и я не добрался до этого проекта до сегодняшнего дня. Ваш код был очень полезен и действительно помог мне лучше понять все тонкости карт Google, чем раньше. Хорошего дня! - person InterfaceGuy; 26.07.2012