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

Question

我想根据我的某个建筑物是否正在投掷建筑物警报来打开Goog​​le Maps 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)); 

，但似乎并不奏效

总之，我需要评估每个标记在我的页面中的一个值，并根据该值打开（或不打开）每个建筑物的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

由于许多建筑可能是“警戒状态”，你会想要一个信息窗口阵列（在我的演示它是一个全球性的，因为我使用内联调用）;但是，屏幕可能会很容易混乱。我编写了一个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); 
}