ユーザーが地図をドラッグした後、地図の中心が円の範囲内にあるかどうかを確認する方法は？

Question

私は、画面の中央にマーカーを持つ地図を持っています。 私はまた、ユーザーがマップの中心をドラッグできる「許可された」領域の境界を持つ円を持っています。 ユーザーがこのサークルの外に地図をドラッグした場合、エラーメッセージを表示する必要があります。 以下のコードで私が間違っていることを教えてください。

eventにはlatLng paramが含まれていないため、この行にエラーがあります。私は現在の位置の緯度と経度を正しく得る方法を知らない。 the documentationパー

var map; 
 

 
function initialize() { 
 

 
    var _latitudeLongitude = new window.google.maps.LatLng(51.805616, -0.192647); 
 

 
    var circle = new window.google.maps.Circle({ 
 
     center: _latitudeLongitude, 
 
     radius: 50000 
 
    }); 
 

 
    var _latLngBounds = circle.getBounds(); 
 

 
    var locations = [ 
 
    ['WELWYN GARDEN CITY ', 51.805616, -0.192647, 2], 
 
    ['STANMORE  ', 51.603199, -0.296803, 1] 
 
    ]; 
 

 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
    navigationControl: true, 
 
    scrollwheel: false, 
 
    scaleControl: false, 
 
    draggable: true, 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(51.75339, -0.210114), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var marker, i; 
 

 
    for (i = 0; i < locations.length; i++) { 
 
    marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     map: map, 
 
     zIndex: 10 
 
    }); 
 

 
    window.google.maps.event.addListener(map , 'drag', function (event) { 
 
      marker.setPosition(map.getCenter()); 
 

 
      if (_latLngBounds.contains(event.latLng)) { 
 
       // everything is fine 
 
      } else { 
 
       alert('outside of the boundaries'); 
 
      } 
 

 
    }); 
 

 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

Answer 1

、ドラッグイベントは、任意の引数（もdragendイベントイベント）がありません。

イベント

ドラッグ |引数：なし|このイベントは、ユーザーがマップをドラッグしている間に繰り返し発生します。

（map.getCenter()を呼び出して）地図の中心を取得する必要があります。

window.google.maps.event.addListener(map, 'drag', function() { 
    marker.setPosition(map.getCenter()); 

    if (_latLngBounds.contains(map.getCenter())) { 
    // everything is fine 
    } else { 
    alert('outside of the boundaries'); 
    } 

}); 

注： A LatLngBoundsが長方形です。円の内部をチェックしたい場合は、正確ではありません（四角のコーナーはサークルの "内"ではなく境界にあります）。円は円の半径より小さい。

var map; 
 

 
function initialize() { 
 

 
    var _latitudeLongitude = new window.google.maps.LatLng(51.805616, -0.192647); 
 

 
    var circle = new window.google.maps.Circle({ 
 
    center: _latitudeLongitude, 
 
    radius: 50000 
 
    }); 
 

 
    var _latLngBounds = circle.getBounds(); 
 

 
    var locations = [ 
 
    ['WELWYN GARDEN CITY ', 51.805616, -0.192647, 2], 
 
    ['STANMORE  ', 51.603199, -0.296803, 1] 
 
    ]; 
 

 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
    navigationControl: true, 
 
    scrollwheel: false, 
 
    scaleControl: false, 
 
    draggable: true, 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(51.75339, -0.210114), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var marker, i; 
 

 
    for (i = 0; i < locations.length; i++) { 
 
    marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     map: map, 
 
     zIndex: 10 
 
    }); 
 

 
    window.google.maps.event.addListener(map, 'drag', function() { 
 
     marker.setPosition(map.getCenter()); 
 

 
     if (_latLngBounds.contains(map.getCenter())) { 
 
     // everything is fine 
 
     } else { 
 
     alert('outside of the boundaries'); 
 
     } 
 

 
    }); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

： Calculate Marker In Circle

コードスニペットを参照してください。