google-maps - 根据特定条件打开 Google Maps InfoWindow

Question

我想打开一个谷歌地图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++;

});

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