5

私が構築しているアプリケーションでは、Google Maps API が画面の大部分 (すべてではないにしても) を占めています。ただし、テスト中に、ユーザーがマップを下にドラッグすると、マップが表示されなくなり、灰色の背景だけが残ることがわかりました。

どうすればこれを止めることができますか? 私は minZoom を設定しましたが、これはページがロードされ、ユーザーがズームアウトしたい場合の問題のみを解決します。

4

4 に答える 4

8

マップの境界を調べて、ユーザーが予想される範囲外にパンした場合は、パンを無効にしてマップ エリアに戻ることができます。

map.getBounds().getSouthWest().lat() must be > -85

map.getBounds().getNorthEast().lat() must be < 85

たとえば、次のようになります。

  G.event.addListener(map, 'drag', checkLatitude);

その後

function checkLatitude(){
    var proj = map.getProjection();
    var bounds = map.getBounds();
    var sLat = map.getBounds().getSouthWest().lat();
    var nLat = map.getBounds().getNorthEast().lat();
    if (sLat < -85 || nLat > 85) {
//gray areas are visible
         alert('Gray area visible');
         map.setOptions({draggable:false});
  //return to a valid position
    }

}

-85 と 85 の制限値は、おおよその値です。正確な値は(古いフォーラムのこの投稿atan(sinh(PI)) *180 / PI = 85.05112878..で説明されています) です。

于 2012-08-29T18:19:19.627 に答える
3

このソリューションは Marcelo の非常に優れた回答に基づいていますが、マップが世界の最大緯度または最小緯度を超えると、彼のソリューションはそれ以上のドラッグ (マップの表示領域の有効なドラッグを含む) を完全に無効にします。これは明確化されたバージョンで、ユーザーがドラッグして最大または最小緯度を超えた場合にマップをビューに戻します。ユーザーは、すべての表示領域をドラッグできます。

また、このソリューションでは、マップの最小ズーム レベルを設定します。これを使用して、ズームしようとしてもマップに灰色の領域が表示されないようにすることができます。

(「Google マップ API V3 でパンを制限するにはどうすればよいですか?」も参照してください) 。

var lastValidCenter;
var minZoomLevel = 2;

setOutOfBoundsListener();

function setOutOfBoundsListener() {
        google.maps.event.addListener(map, 'dragend', function () {
            checkLatitude(map);
        });
        google.maps.event.addListener(map, 'idle', function () {
            checkLatitude(map);
        });
        google.maps.event.addListener(map, 'zoom_changed', function () {
            checkLatitude(map);
        });
};

function checkLatitude(map) {
    if (this.minZoomLevel) {
        if (map.getZoom() < minZoomLevel) {
            map.setZoom(parseInt(minZoomLevel));
        }
    }

    var bounds = map.getBounds();
    var sLat = map.getBounds().getSouthWest().lat();
    var nLat = map.getBounds().getNorthEast().lat();
    if (sLat < -85 || nLat > 85) {
        //the map has gone beyone the world's max or min latitude - gray areas are visible
        //return to a valid position
        if (this.lastValidCenter) {
            map.setCenter(this.lastValidCenter);
        }
    }
    else {
        this.lastValidCenter = map.getCenter();
    }
}

(「center_changed」リスナーは使用しませんでした。マップがパンされている間、center_changed イベントが継続的に発生します。これにより、ユーザーが「元に戻る」のではなく、灰色の領域にパンすることができなくなる可能性があります。これにより、stackoverflow エラーが発生する可能性があります。ただし、Chrome では、イベントがトリガーされる回数のため)

于 2017-10-31T05:31:17.230 に答える
-1

私はあなたと同じ問題を抱えています。私がそれを回避する1つの方法は、マップを初期化する場所にこれを配置することです。

            google.maps.event.trigger(map, 'resize');
            map.setZoom( map.getZoom() );

            google.maps.event.addListener(map, "idle", function(){
                google.maps.event.trigger(map, 'resize');
            });

これは基本的に、マップをドラッグして「解決」すると、イベントが発生してサイズが変更され、その結果、何らかの理由でマップが表示されることを意味します。

ハッキーではない方法を見つけた場合は、共有してください。:)

于 2012-08-29T15:37:03.120 に答える