Question

我想根据我的某个建筑物是否正在投掷楼宇警报来打开Google地图InfoWindow。我有标记的建筑物都有报警状态（开或关），如果它们处于报警状态，我会根据报警的严重程度将标记的颜色更改为黄色或红色。当警报为“红色”警报时，标记将使用google.maps.Animation.BOUNCE效果进行动画处理。

跳出效果有时不足以吸引注意力（我们将此屏幕保留在墙上，以下$(this).children(".alarm-count") div中的数据由于我们在后台运行的另一个脚本而动态更改

我已经知道如何根据闹钟状态更改标记，我是否也可以在相同条件下打开InfoWindow？我试过这个：

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

但它似乎没有起作用。

它的长短是我需要在页面中为每个标记评估一个值，并根据该值打开（或不打开）每个建筑物的InfoWindow。

这是我的代码：

$(".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++;

});

Answer 1

由于许多建筑物可能处于“警戒”状态，因此您需要一个InfoWindow阵列（在我的演示中它是全局的，因为我使用内联调用）;但是，屏幕可能很容易混乱。我写了一个Z-Index例程，将点击的InfoWindow带到前面。您可能还想考虑MarkerWithLabel或InfoBubble，因为在我看来，它们看起来比香草InfoWindow更好。

请see the demo

demo side-by-side with code

我只会复制一些非常不同的部分。

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

根据特定条件打开Google地图InfoWindow

1 个答案:

根据特定条件打开Goog​​le地图InfoWindow

1 个答案:

根据特定条件打开Google地图InfoWindow