2016-05-28 7 views
0

マップ(GoogleマップJavaScript API)上のある都市のすべての支店を表示するソリューションをクライアントに提供したいと考えています。地図は、典型的なGoogleマップよりもウェブサイト内のアプリのように動作します。ドラッグ可能でもズームもできません。地図の右側にすべてのマーカーを合わせるようにGoogleマップを再調整する

地図の再配置を処理する小さな関数をまとめて、マップビューポート内のすべてのマーカーを持つようにしました。この関数はpageloadで呼び出され、ウィンドウのサイズが変更されるたびに呼び出されます。

これは完全に機能しますが、私はこのスクリプトをもっと細かく調整する必要があります。ここで私はそれを実行する方法がわかりません:後で、永続的な情報ウィンドウが左の30%地図。マーカーがその下に隠れないようにするには、のrealign関数をマップオブジェクトの右の70%だけを計算に使用するように制限するといいでしょう。 Googleマップの地図・オブジェクトと配列Googleマップのマーカーオブジェクトを含むグローバル変数です

function realignMap() { 
    resizeFinished(function(){ 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
     bounds.extend(markers[i].getPosition()); 
    } 
    map.fitBounds(bounds); 
    }, 300, 'mapresizeuniqueid'); 
} 

マップマーカー:ここ

は目的球は、現在のように見えるものです。 resizeFinishedは、ウィンドウを最大化してスナップすることでイベントが発生しないようにするための小さな回避策です。

事前にお申し込みいただきありがとうございます。ご挨拶 - ジョナサン

PS:必要のない場合は...

答えて

3

をjQueryのソリューションを提供しないでください、私はこの問題への2つの解決策を考えることができます。

に地図のdivを縮小あなたが実際に望むサイズ。なぜあなたは地図上にdivを表示するのですか? info-windowが存在するときにmap divを縮めないのはなぜですか?そして、info-windowが存在しないときにサイズを変更してください(注意:トリガーresizeイベントは、それらの操作の後にマップ上に表示されます)。実際の理由がない場合は、この解決方法をお勧めします。あなたは適切な距離tiの計算境界から左側にあるであろう偽の境界要素を作成することができますのために1.もし

2.は実行可能ではありません。例えば。元のバウンディングボックスlng50で始まり、70で終わります。つまり、幅が20,20*0.3=6であることを意味します。したがって、50-6 = 44に偽の要素を作成し、それらの新しい境界にマップをフィットさせることになります。もちろん

function realignMap() { 
    resizeFinished(function(){ 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
     bounds.extend(markers[i].getPosition()); 
    } 
    var width = bounds.getSouthWest().lng() > bounds.getNorthEast().lng() ? (180 - bounds.getSouthWest().lng()) + (bounds.getNorthEast().lng() - (-180)) : bounds.getSouthWest().lng() - bounds.getNorthEast().lng(); 
    if(width > 180); 
    var new_lng = bounds.getSouthWest().lng() - (width * 0.3); 
    if(new_lng < -180) new_lng = 180 - (-180 - new_lng); 
    bounds.extend(new google.maps.LatLng(bounds.getCenter().lat(), new_lng); 
    map.fitBounds(bounds); 
    }, 300, 'mapresizeuniqueid'); 
} 

あなたのマーカーは、地球全体の70%よりも大きいlngスパンをカバーしている場合、これは動作しないでしょう。だからあなたのコードは、この(未テスト)のようになります。ときbounds.getSouthWest()。LNG()> bounds.getNorthEast()のコードが動作するように編集された

EDIT。LNG()

+0

私はこの方法を考えていなかった、ありがとうございます。これは実際にそれを行う非常に良い方法です!コードに失われたif文が含まれています。そして、ほとんどの場合、180-stuffとlng-neはlng-swより小さく、とりわけヨーロッパの小さな都市の1つである場合は除外できます.-) Btw。:解決策1は、解決策2がより低温に見えるので適合しません。オーバーレイは空想的です! –

+0

それはあなたのためにうれしい!はい、私はそれがまれなケースのためだけであることを認識していますが、私は考えることができるすべてのケースを考慮に入れるコードを望んでいました。 –

関連する問題