javascript - Googleマップで都市の周りに境界を設定する

Question

JavaScript を使用して Google マップ API V3 内の特定の都市/町の周囲に境界を設定する方法を探しています

この種のことは API 内でもサポートされていますか?

基本的に、ユーザーが都市の境界だけでなく地方も含めて、都市よりもさらに地図をパンできるようにしたくありません。

Answer 1

都市の境界のポイントを取得する必要があり、ポリラインを作成できます。たとえば、1 つのアイデアは次のようになります。

limitCoord = [
    new google.maps.LatLng(42.49956716,-7.019005501),
    new google.maps.LatLng(42.49947126,-7.029286373),
    new google.maps.LatLng(42.50904062,-7.049299123),
    new google.maps.LatLng(42.50722622,-7.069103626),
    new google.maps.LatLng(42.50452387,-7.000150672),
    new google.maps.LatLng(42.49348015,-6.983058917),
    new google.maps.LatLng(42.49843269,-6.971666546),
    new google.maps.LatLng(42.51765791,-6.956909023),
    new google.maps.LatLng(42.52010069,-6.927429186),
    new google.maps.LatLng(42.50992238,-6.914231493),
    new google.maps.LatLng(42.50096695,-6.879679821),
    new google.maps.LatLng(42.48775868,-6.857775832),
    new google.maps.LatLng(43.23907504,-3.293216584)], "#000000", 5);

var boundries = new google.maps.Polyline({
    path: limitCoord,
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 2
});

Answer 2

都市/町に提供したい境界線を作成できます。都市の境界の座標を指定するポリラインまたはポリゴンを描画するだけです。Gmap V3 のオーバーレイのデモとドキュメントを
ご覧ください

次のコードを試して、ユーザーがリージョン全体をパンするように制限してください。

 // 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));
   });

これにより、ユーザーが北米の地域をパンすることが制限されます

Answer 3

1. map.fitBounds()またはを使用map.setCenter()して、都市/国/地域を地図の中央に配置します。
2. オプションを使用draggable: falseして、パンを無効にします。