0

Google マップの 2 つの円 (マーカーの周囲) が交差または衝突したことを検出できるかどうかを調べようとしています。

私が達成したいのは、2 つの円が交差する場合、イベントを発生させたいということです。これが可能かどうかはわかりません。

4

2 に答える 2

1

円の中心間の距離を計算します。2 つの円の半径の合計よりも小さい場合、それらは交差します。

概念実証フィドル

(Larry Dukek の回答のコードに基づいていますが、ジオメトリ ライブラリのネイティブ Google Maps Javascript API v3 関数を使用しています)

例のスクリーンショット

コードスニペット：

let map;

function initMap() {
  // Create the map.
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 41.081301,
      lng: -98.214219
    },
    zoom: 25
  });

  var c0 = new google.maps.Circle({
    strokeColor: '#0000FF',
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: '#0000FF',
    fillOpacity: 0.2,
    map: map,
    center: {
      lat: 41.082953,
      lng: -98.215285
    },
    radius: 200
  });

  var c1 = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: '#FF0000',
    fillOpacity: 0.2,
    map: map,
    center: {
      lat: 41.081070,
      lng: -98.214027
    },
    radius: 34.692866520
  });
  console.log("c1 & c0 hasIntersections returns:" + hasIntersections(c1, c0));
  var c2 = new google.maps.Circle({
    strokeColor: '#00FF00',
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: '#00FF00',
    fillOpacity: 0.2,
    map: map,
    center: {
      lat: 41.083313,
      lng: -98.211635
    },
    radius: 34.692866520
  });
  console.log("c2 & c0 hasIntersections returns:" + hasIntersections(c2, c0));
}

function hasIntersections(circle0, circle1) {
  var center0 = circle0.getCenter();
  var center1 = circle1.getCenter();

  var maxDist = circle0.getRadius() + circle1.getRadius();
  var actualDist = google.maps.geometry.spherical.computeDistanceBetween(center0, center1);

  return maxDist >= actualDist;
}
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html>

<head>
  <title>Circles</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>

  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=geometry&v=weekly&channel=2" async></script>
</body>

</html>

于 2013-04-23T00:33:11.513 に答える
0

2 つの円が交差するかどうかを検出する JavaScript を次に示します。

 var e = Math;         // shortcut for the mathematical function 
 var D2R = e.PI/180.0; // value used for converting degrees to radians

 Number.prototype.toRadians = function() {
   return this * D2R;
 };

 function distance(lat0,lng0,lat1,lng1){

   // convert degrees to radians
   var rlat0 = lat0.toRadians();
   var rlng0 = lng0.toRadians();
   var rlat1 = lat1.toRadians();
   var rlng1 = lng1.toRadians();

   // calculate the differences for both latitude and longitude (the deltas)
   var Δlat=(rlat1-rlat0);
   var Δlng=(rlng1-rlng0);

   // calculate the great use haversine formula to calculate great-circle distance between two points
   var a = e.pow(e.sin(Δlat/2),2) + e.pow(e.sin(Δlng/2),2)*e.cos(rlat0)*e.cos(rlat1);
   var c = 2*e.asin(e.sqrt(a));
   var d = c * 6378137;  // multiply by the radius of the great-circle (average radius of the earth in meters)

   return d;
 }

  function hasIntersections(circle0,circle1){
    var center0 = circle0.getCenter();
    var center1 = circle1.getCenter();

    var maxDist = circle0.getRadius()+circle1.getRadius();
    var actualDist = distance(center0.lat(),center0.lng(),center1.lat(),center1.lng());

    return maxDist>=actualDist;
  }

サークルへの参照を使用して hasIntersections を呼び出すだけです。これは、2 つの円がほぼ接触している (false を返す) ことを示す例です。c1 のゼロを 1 に変更すると、それらは接触します (true を返す)。

    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 41.081301, lng: -98.214219},
      zoom: 25
    });

    var c0 = new google.maps.Circle({
        strokeOpacity: .1,
        strokeWeight: 1,
        fillColor: '#0000FF',
        fillOpacity: .2,
        map: map,
        center: {lat:41.082953, lng:  -98.215285},
        radius: 200
      });

    var c1 =new google.maps.Circle({
        strokeOpacity: .1,
        strokeWeight: 1,
        fillColor: '#FF0000',
        fillOpacity: .2,
        map: map,
        center: {lat:41.081070, lng: -98.214027},
        radius: 34.692866520
      });
      console.log(hasIntersections(c1,c0));
于 2016-08-18T14:12:36.460 に答える