Google マップ V3 を特定の地理的エリアとズーム レベルに制限するにはどうすればよいですか?

Google マップ V3 での表示可能エリアとズーム レベルの制限

ユーザーは、Google マップ V3 を特定の地理的範囲内に制限する必要があるシナリオに遭遇する可能性があります。を制限し、ズーム機能を制限します。この記事では、ユーザーがその境界を越えて移動できないようにしながら、地図の表示を指定されたエリア (国など) に制限するソリューションを検討します。さらに、ズーム レベルを事前定義された範囲に制限する方法についても説明します。

これを実現するために、Google マップ V3 には minZoom と maxZoom のオプションが用意されています。これらのパラメータを指定することで、ユーザーに許可される最小および最大のズーム レベルを設定できます。

例:

var map;
var opt = { minZoom: 6, maxZoom: 9 };
map = new google.maps.Map(document.getElementById('map-canvas'), opt);

上記のコードにより、ユーザーはレベル 6 から 9 までの範囲内でマップをズームします。ただし、この解決策はズーム レベルの制限のみに対処します。表示可能な領域を特定の領域に制限するには、さらにカスタマイズする必要があります。 StyledMaps を使用してマップのスタイルをカスタマイズすると、この目標を達成できます。

例:

var map;
var styles = [
  {
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "visibility": "on"
      }
    ]
  }
];

map = new google.maps.Map(document.getElementById('map-canvas'));
map.setOptions({
  styles: styles,
  minZoom: 6,
  maxZoom: 9
});

このコードは、指定された国以外のすべての地理的フィーチャを非表示に設定し、効果的に制限します。その国の表示可能な地図エリア。また、最小ズーム レベルと最大ズーム レベルをそれぞれ 6 と 9 に設定します。

以上がGoogle マップ V3 を特定の地理的エリアとズーム レベルに制限するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。