Google maps 根据特定条件打开谷歌地图信息窗口

我想打开一个谷歌地图

信息窗口

，根据我的建筑是否发出建筑警报。我有标记的建筑物都有报警状态（打开或关闭），如果它们处于报警状态，我会根据报警的严重程度将标记的颜色更改为黄色或红色。当报警为“红色”报警时，标记将使用

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

google.maps.event.addListener（映射，'idle'，（函数（marker，i）{
返回函数（）{
infowindow.setContent(
''+
''+
''+bldgName[i]+''+
''+bldgAddr[i]+''+
“”+main仪表[i]+“kW
”+
“”+alarmCount[i]+”报警+
''
)；信息窗口。打开（地图、标记）；
}
})（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++;

});

$（“.building”）。每个功能（一）{
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（“.mainMeter”）.html（）；
alarmCount[i]=$（this.children（“.alarm count”）.html（）；
纬度[i]=$（this.children（“.latitude”）.html（）；
经度[i]=$（this.children（“.longide”）.html（）；
if（alarmCount[i]！=“N/A”）{alarmCount[i]=alarmCount[i]。切片（0，-3）；}
如果（alarmCount[i]>“0”和&alarmCount[i]！=“不适用”）{
marker=new google.maps.marker（{position:new google.maps.LatLng（纬度[i]，经度[i]），map:map，shadow:shadow，icon:redIcon，title:bldgName[i]+“\n”+bldgAddr[i]，optimized:false}）；marker.setAnimation（google.maps.Animation.BOUNCE）；
////    
////打开信息窗口的命令会在这里，对吗？
////
}
else if（$（this）.hasClass（“new”）||（mainMeter[i]=“N/A”）||（！isNumber（mainMeter[i]））{
marker=new google.maps.marker（{position:new google.maps.LatLng（纬度[i]，经度[i]），map:map，shadow:shadow，icon:yellowIcon，title:bldgName[i]+“\n”+bldgAddr[i]，optimized:false}）；marker.setAnimation（google.maps.Animation.NULL）；}
否则{
marker=new google.maps.marker（{position:new google.maps.LatLng（纬度[i]，经度[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（标记，'click'，（函数（标记，i）{
返回函数（）{
infowindow.setContent(
''+
''+
''+bldgName[i]+''+
''+bldgAddr[i]+''+
“”+main仪表[i]+“kW
”+
“”+alarmCount[i]+”报警+
''
)；信息窗口。打开（地图、标记）；
}
})（marker，i））；
i++；
});

由于许多建筑物可能处于“警戒”状态，您需要一个InfoWindow阵列（在我的演示中，它是一个全局的，因为我使用内联调用）但是，屏幕可能会变得杂乱无章。我写了一个Z索引例程，把点击的信息输入到前面。你可能还想考虑<代码>标记符>标签> <或代码>信息泡泡< /代码>，因为在我看来，它们看起来比香草信息包好。

请

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

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

var infowindows=[]；
函数初始化（）{
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
//跳过了许多行
// ...
$（this.children（“.longitude”）.html（）；
infowindows[i]=新的google.maps.InfoWindow({
内容：''+bldgName[i]+''}）；
如果（alarmCount[i]>0&&alarmCount[i]！=“不适用”）{
//marker=new google.maps.marker（{position:new google.maps.LatLng（纬度[i]，经度[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（{位置：new google.maps.LatLng（纬度[i]，经度[i]），地图：地图，标题：“红色”}）；
信息窗口[i]。打开（地图、标记）；
////打开信息窗口的命令会在这里，对吗？
}
...
google.maps.event.addListener（标记，'click'，（函数（标记，i）{
返回函数（）{
信息窗口[i]。打开（地图、标记）；
布林托夫隆（i）；
}
})（marker，i））；
});
}
函数bringToFront（windowIndex）{
console.log（windowIndex）；
对于（var i=infowindows.length-1，n=0；i>=n；i--）{
infowindows[i].setZIndex（0）；
}
infowindows[windowIndex].setZIndex（1）；
}

太棒了！这工作做得很好！非常感谢，海托。抱歉耽搁了；其他事情发生了，直到今天我才开始这个项目。你的代码非常有用，实际上帮助我比以前更好地理解谷歌地图的来龙去脉。祝你有美好的一天！