Google Maps v3-表示可能な領域とズームレベルを制限する


97

Googleマップv3を特定のエリアに制限することは可能ですか?一部の領域(国など)のみの表示を許可し、ユーザーが他の場所にスライドすることを禁止します。また、ズームレベルを制限したいと思います。たとえば、レベル6と9の間だけです。また、すべての基本マップタイプを使用したいと思います。

これを達成する方法はありますか?

StyledMapを使用してズームレベルを制限することで部分的に成功しましたが、ROADMAPを制限することでのみ成功しました。他の基本的なタイプのズームをこのように制限することはできませんでした。

助けてくれてありがとう

回答:


119

dragendイベントをリッスンでき、マップが許可された境界の外にドラッグされた場合は、マップを内側に戻します。LatLngBoundsオブジェクトで許可される境界を定義し、contains()メソッドを使用して、新しい緯度/経度の中心が境界内にあるかどうかを確認できます。

ズームレベルを非常に簡単に制限することもできます。

次の例について考えてみます。 Fiddle Demo

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps JavaScript API v3 Example: Limit Panning and Zoom</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <script type="text/javascript"> 

   // This is the minimum zoom level that we'll allow
   var minZoomLevel = 5;

   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: minZoomLevel,
      center: new google.maps.LatLng(38.50, -90.50),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   // Bounds for North America
   var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(28.70, -127.50), 
     new google.maps.LatLng(48.85, -55.90)
   );

   // Listen for the dragend event
   google.maps.event.addListener(map, 'dragend', function() {
     if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
   });

   // Limit the zoom level
   google.maps.event.addListener(map, 'zoom_changed', function() {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
   });

   </script> 
</body> 
</html>

上記の例のスクリーンショット。この場合、ユーザーはさらに南または極東にドラッグできません。

Google Maps JavaScript API v3の例:マップのドラッグを強制的に停止


2
決定はきれいに見えません。なぜif (x < minX) x = minX;if (x > maxX) x = maxX;お互いを排除しないのですか?中心の座標ではないのに、キャンバスをminX / maxXおよびmaxX / maxY座標の中心に配置するのはなぜですか?
アレクサンダーパラマルチュク2012

1
dragendイベントの代わりに、draggable: falseマップインスタンスで使用できます(実際の例
machineaddict '24

これは、「zoom_changed」イベントを使用してユーザーを制限するのに適した手法ではありません。最初は常に最小レベルを超えてからコードを使用するため、最小ズームを設定すると画面がちらつきます。
Jitendra Pancholi 2015

zillow.com/homes/for_sale/days_sort/…を確認してください彼らは正しい方法でそれを行っていますが、その方法はわかりません。
Jitendra Pancholi

1
center_changed代わりにイベントに変更した場合、これは完全に機能しましたdragend
ヨハンB

182

ズームレベルを制限するより良い方法は、イベントに反応するのではなく、minZoom/ maxZoomオプションを使用することでしょうか?

var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);

または、マップの初期化中にオプションを指定できます。例:

var map = new google.maps.Map(document.getElementById('map-canvas'), opt);

参照:Google Maps JavaScript API V3リファレンス


3
これは確かにズームレベルを制限する最良の方法です。私が投稿を書いているとき、機能はMaps API v3にはありませんでした。ありがたいことに、彼らはAPIを改善し続けています。
Tomik

2
これは完全に機能します。これがズームの最良の答えになるはずです。
paullb

3
これは、選択した回答だけを見る人のための回答としてマークする必要があります。
ErJab 2012年

9
ズームレベルを設定しても、パンには影響しません。
simpatico 2012年

1
間違いなく最良の方法
ChrisRich 14

16

朗報です。2019年2月14日にリリースされたMaps JavaScript APIのバージョン3.35以降、新しいrestrictionオプションを使用してマップのビューポートを制限できます。

ドキュメントによると

MapRestrictionインターフェース

マップに適用できる制限。マップのビューポートはこれらの制限を超えることはありません。

ソース:https : //developers.google.com/maps/documentation/javascript/reference/map#MapRestriction

したがって、マップの初期化中に制限オプションを追加するだけです。ビューポートをスイスに制限する次の例を見てください。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 46.818188, lng: 8.227512},
    minZoom: 7,
    maxZoom: 14,
    zoom: 7,
    restriction: {
      latLngBounds: {
        east: 10.49234,
        north: 47.808455,
        south: 45.81792,
        west: 5.95608
      },
      strictBounds: true
    },
  });
}
#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" async defer></script>

これが役に立てば幸いです!


リンクが機能していません。これがこのトピックに関する新しいものです。例:developers-dot-devsite-v2-prod.appspot.com/maps/documentation/…DOCSdevelopers-dot-devsite-v2-prod.appspot.com/maps/documentation/ …
アダム

1
ドキュメントのリンクを修正しました。
-xomena

ありがとう、このコードはうまくいきました。つまり、ズームをminZoomとmaxZoomで可能な1レベルのみに制限した場合です。これが意図したとおりに機能する場合は、ズームレベルごとに異なる南、西、北、東を設定する必要があるようです。ズームレベルごとに異なる制限設定があると便利です。私は最大ズームアウトレベルに移動し、そこから座標を定義したので、ズームインしてパンした場合、境界から離れてパンすることができます。
Kim Steinhaug、

6

v.3 +でズームを制限します。マップ設定でデフォルトのズームレベルを追加し、minZoomまたはmaxZoom(または必要に応じて両方)のズームレベルは0〜19です。制限が必要な場合は、デフォルトのズームレベルを宣言する必要があります。すべて大文字と小文字が区別されます。

function initialize() {
   var mapOptions = {
      maxZoom:17,
      minZoom:15,
      zoom:15,
      ....

3

範囲を制限するはるかに良い方法...上記のポスターのcontainsロジックを使用しました。

var dragStartCenter;

google.maps.event.addListener(map, 'dragstart', function(){
                                       dragStartCenter = map.getCenter();
                                         });

google.maps.event.addListener(this.googleMap, 'dragend', function(){
                            if (mapBounds.contains(map.getCenter())) return;
                    map.setCenter(this.dragStart);
                           });

なぜ2番目のリスナーのthis.googleMap代わりに追加するのmapですか?またべきではないdragStartことdragStartCenter?最後に何mapBoundsですか?
hobbes3

2
確かに、ユーザーが1回のドラッグ動作で遠くまでドラッグするのをやめるだけです。彼らはまだたくさんの小さな抗力を作り、どこかに行き着くかもしれません、いいえ?
ジェームズ

1

これを使用して、マップを特定の場所に再配置できます。それは私が必要としたものです。

    var MapBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(35.676263, 13.949096),
    new google.maps.LatLng(36.204391, 14.89038));

    google.maps.event.addListener(GoogleMap, 'dragend', function ()
    {
        if (MapBounds.contains(GoogleMap.getCenter()))
        {
            return;
        }
        else
        {
            GoogleMap.setCenter(new google.maps.LatLng(35.920242, 14.428825));
        }
    });

1
myOptions = {
        center: myLatlng,
        minZoom: 6,
        maxZoom: 9,
        styles: customStyles,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

1
これは質問の答えにはなりません。
キットSunde、2015年

0

これが、表示可能領域の制限の問題を解決するための私の変種です。

        google.maps.event.addListener(this.map, 'idle', function() {
            var minLat = strictBounds.getSouthWest().lat();
            var minLon = strictBounds.getSouthWest().lng();
            var maxLat = strictBounds.getNorthEast().lat();
            var maxLon = strictBounds.getNorthEast().lng();
            var cBounds  = self.map.getBounds();
            var cMinLat = cBounds.getSouthWest().lat();
            var cMinLon = cBounds.getSouthWest().lng();
            var cMaxLat = cBounds.getNorthEast().lat();
            var cMaxLon = cBounds.getNorthEast().lng();
            var centerLat = self.map.getCenter().lat();
            var centerLon = self.map.getCenter().lng();

            if((cMaxLat - cMinLat > maxLat - minLat) || (cMaxLon - cMinLon > maxLon - minLon))
            {   //We can't position the canvas to strict borders with a current zoom level
                self.map.setZoomLevel(self.map.getZoomLevel()+1);
                return;
            }
            if(cMinLat < minLat)
                var newCenterLat = minLat + ((cMaxLat-cMinLat) / 2);
            else if(cMaxLat > maxLat)
                var newCenterLat = maxLat - ((cMaxLat-cMinLat) / 2);
            else
                var newCenterLat = centerLat;
            if(cMinLon < minLon)
                var newCenterLon = minLon + ((cMaxLon-cMinLon) / 2);
            else if(cMaxLon > maxLon)
                var newCenterLon = maxLon - ((cMaxLon-cMinLon) / 2);
            else
                var newCenterLon = centerLon;

            if(newCenterLat != centerLat || newCenterLon != centerLon)
                self.map.setCenter(new google.maps.LatLng(newCenterLat, newCenterLon));
        });

strictBoundsnew google.maps.LatLngBounds()タイプのオブジェクトです。self.gmapGoogle Mapオブジェクト(new google.maps.Map())を格納します。

それは実際に機能しますが、境界がそれらをカバーする場合は、0番目の経線と緯線を横切る痔を考慮することを忘れないでください。


受け入れられたDaniel Vassalloのアルゴリズムは、私には適切に機能しません。ここにはいくつかの主要な違いがあります。
アレクサンダーパラマルチュク2012

0

何らかの理由で

if (strictBounds.contains(map.getCenter())) return;

私にはうまくいきませんでした(おそらく南半球の問題)。私はそれを次のように変更する必要がありました:

    function checkBounds() {
        var c = map.getCenter(),
            x = c.lng(),
            y = c.lat(),
            maxX = strictBounds.getNorthEast().lng(),
            maxY = strictBounds.getNorthEast().lat(),
            minX = strictBounds.getSouthWest().lng(),
            minY = strictBounds.getSouthWest().lat();

        if(x < minX || x > maxX || y < minY || y > maxY) {
            if (x < minX) x = minX;
            if (x > maxX) x = maxX;
            if (y < minY) y = minY;
            if (y > maxY) y = maxY;
            map.setCenter(new google.maps.LatLng(y, x));
        }
    }

それが誰かを助けることを願っています。


0

1つの解決策は、特定の緯度/経度を知っている場合です。

google.maps.event.addListener(map, 'idle', function() {

    map.setCenter(new google.maps.LatLng(latitude, longitude));
    map.setZoom(8);

});

特定の緯度/経度がない場合

google.maps.event.addListener(map, 'idle', function() {

    map.setCenter(map.getCenter());
    map.setZoom(8);

});

または

google.maps.event.addListener(map, 'idle', function() {

    var bounds = new google.maps.LatLngBounds();
    map.setCenter(bounds.getCenter());
    map.setZoom(8);

});

0

2016年半ば以降、表示可能な領域を制限する公式な方法はありません。ただし、境界を制限するアドホックソリューションのほとんどには欠陥があります。それらはマップビューに合うように境界を正確に制限しないため、マップの中心が指定された境界の外にある場合にのみ制限します。私のように境界をオーバーレイ画像に制限したい場合、これにより、下に示すような動作が発生し、アンダーレイマップが画像オーバーレイの下に表示されます。

ここに画像の説明を入力してください

この問題に取り組むために、ライブラリを作成しました。これにより、境界を正常に制限して、オーバーレイからパンできないようにします。

ただし、他の既存のソリューションと同様に、「振動する」問題があります。ユーザーがマップを十分に積極的にパンした場合、マウスの左ボタンを離した後も、マップはそれ自体でパンを続け、徐々に遅くなります。私はいつも地図を境界線に戻しますが、それは一種の振動をもたらします。このパン効果は、現時点ではJs APIが提供する手段で止めることはできません。googleがmap.stopPanningAnimation()などのサポートを追加するまで、スムーズなエクスペリエンスを作成することはできないようです。

上記のライブラリを使用した例、私が得ることができた最もスムーズで厳密な境界の経験:

function initialise(){
  
  var myOptions = {
     zoom: 5,
     center: new google.maps.LatLng(0,0),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  var map = new google.maps.Map(document.getElementById('map'), myOptions);
  
  addStrictBoundsImage(map);
}

function addStrictBoundsImage(map){
	var bounds = new google.maps.LatLngBounds(
		new google.maps.LatLng(62.281819, -150.287132),
		new google.maps.LatLng(62.400471, -150.005608));

	var image_src = 'https://developers.google.com/maps/documentation/' +
		'javascript/examples/full/images/talkeetna.png';

	var strict_bounds_image = new StrictBoundsImage(bounds, image_src, map);
}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load("maps", "3",{other_params:"sensor=false"});
      </script>
<body style="margin:0px; padding:0px;" onload="initialise()">
	 <div id="map" style="height:400px; width:500px;"></div>
     <script  type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script>
</body>

ライブラリは、最小ズーム制限を自動的に計算することもできます。次に、minZoomマップの属性を使用してズームレベルを制限します。

うまくいけば、これは与えられた境界を完全に尊重し、それらからパンすることを許可したくないソリューションを望んでいる誰かを助けるでしょう。


-4

これは役に立ちます。

  var myOptions = {
      center: new google.maps.LatLng($lat,$lang),
      zoom: 7,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

ズームレベルは、要件に応じてカスタマイズできます。


これは、ズームレベルを範囲e.g. only between levels 6 and 9に制限することに関する元の質問には対応していません。デフォルトのズームレベルを設定し、少しやり過ぎであるデフォルトのUI(つまり+/ -)を削除します。
Alastair 2013年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.