4

InfoWindow建物の 1 つが建物の警報を発しているかどうかに基づいて、Google マップを開きたいと考えています。マーカーを付けたすべての建物にはアラーム状態 (オンまたはオフ) があり、アラーム状態の場合は、アラームの重大度に応じてマーカーの色を黄色または赤に変更しています。アラームが「赤」アラームの場合、マーカーは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));

しかし、それは機能していないようです。

要するに、ページ内のマーカーごとに 1 つの値を評価し、その値に基づいて各建物の 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++;

});
4

1 に答える 1

2

多くの建物が「警戒中」である可能性があるため、InfoWindow 配列が必要になります (私のデモでは、インライン呼び出しを使用しているためグローバルです)。ただし、画面が非常に乱雑になる可能性があります。クリックされた InfoWindow を前面に表示する Z-Index ルーチンを作成しました。私の意見では、通常の InfoWindow よりも見栄えが良いため、MarkerWithLabelまたはを検討することもできます。InfoBubble

デモをご覧ください

コードと並べてデモ

非常に異なる部分の一部のみをコピーします。

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);
}
于 2012-07-17T11:38:41.823 に答える