BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] Google Maps v3 - 表示領域とズームレベルの制限

2023-01-20 01:58:34

質問

Google map v3 を特定の地域に限定して表示することは可能でしょうか？ある地域（例：国）だけを表示し、それ以外の場所でのスライドを禁止したいのですが、可能でしょうか？また、ズームレベルを制限したいのですが、例えば、レベル6と9の間だけです。そして、私はすべてのベースマップタイプを使用したいと思います。

これを実現する方法はありますか?

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

ご協力ありがとうございます。

どのように解決するのですか？

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

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

次のような例を考えてみましょう。 フィドルデモ 

<!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>

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します