0

我试图弄清楚是否有可能检测到两个谷歌地图圆圈（围绕标记）何时相交或相互碰撞。

我想要完成的是，如果两个圆圈相交，我想提出一个事件。我不确定这是否可能。

4

2 回答 2

1

计算两个圆心之间的距离，如果小于两个圆的半径之和，则它们相交。

概念证明小提琴

（基于 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

这里有一些 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 即可。这是一个示例，显示两个圆圈几乎接触（返回假），如果您将 c1 中的零更改为一，它们将接触（返回真）。

    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 回答