2016-08-17 13 views
1

私は周りにグーグルであり、私はどこでもこの問題の解決策を見つけることができません。とにかくマップがフルスクリーンになったときやフルスクリーンを終了したときに検出することはありますか? (DOMイベントonfullscreenchangeによく似ています)Googleマップ - 変更イベントの全画面?

"fullscreenControl"オプションがtrueに設定されたマップがあります。地図がフルスクリーン表示されているときにマーカ上にマップを配置するだけでなく、 infowindowマップが全画面表示の場合のみ。フルスクリーンの変更を確認するにはどうすればよいですか?

私は全体マップ上のDOMイベントを使用してみましたが、それが動作するようには思えない、何かのように:

google.maps.event.addDomListener(document.getElementById("map-canvas"), "fullscreen", function() { 
      console.log("FULLSCREEN CHANGED"); 
     }); 

私も、私の代わりに、カスタムコントロールを作ることができると考えましたマップがフルスクリーンになったときにトグルして、そのカスタムコントロールでクリックイベントを聞くことができますが、より良い方法はありませんか?本当にオンスクリーン・チェンジ・イベントなどはありませんか?

ありがとうございました! 「

答えて

1

は私がcenter_change

google.maps.event.addListener(map,'center_change', updateMapBounds); 
} 
function updateMapBounds(){ 
    clearTimeout(mapBoundsTimer); 
    mapBoundsTimer = setTimeout(function() { 
     updateBounds(); 
    }, 500); 
} 
function updateBounds(){ 
    //code to get map_div or gm_style class size and compare it to the 
    if($('.gm_style').height()===window.innnerHeight && 
     $('.gm_style).width() === window.innerWidth){ 
     //fit_markers 
    } 
} 

にタイマーを使用してチェックを含めるように答えを更新していますしかし、私はあなたがgoogle.maps.event.addListener(map.'idleを使用する場合はupdateMapBoundsを削除することができると思い、 updateBounds());

+0

ハムマップはグローバルにアクセス可能な変数なので、マップのサイズ変更をトリガする必要はありませんが、私はあなたがサイズ変更をトリガするように提案した理由を理解しています。フルスクリーンの検出については、どのように幅/高さチェックを行うのですか?マップキャンバス上の「変更」リスナーは機能しますか? –

+0

はい、それを高さと幅と比較して、フルサイズであるかどうかを確認します。 – telhar

+0

さて、もう少し試してみましたが、通常のDOM要素として動作しないため、マップの変更を確認する簡単な方法はありません。だから私がやることは、センターが変更されたときにリスナーをマップに追加し、JQueryを使用してGoogleマップがマップを作成するために追加するdivを比較することです(常に「gmスタイル」というクラスがあります)。ウィンドウのinnerHeightとinnerWidthでwidthを設定した場合、境界を調整するだけです。これをフラグ変数と組み合わせると、fitBoundsを1回だけ呼び出すことができます。これは理にかなっていますか?あなたはこれであなたの答えを更新したいですか? –

関連する問題