标记半径谷歌地图内的路线

Question

我需要你的帮助 我需要知道在某些时候我的路线（A-> B）是否在我的标记（C）半径内 有没有办法弄清楚这个事件的真假？

这个想法就像Uber Pool algorythm或者那个接近它的东西

<div id="map-canvas"></div>

HTML

html, body {
      height: 100%;
      margin: 0;
      padding: 0;
  }
  #map-canvas {
      height: 100%;
      width: 100%;
  }

CSS

tableView

Here´s小提琴 Tks很多

Answer 1

处理返回方向折线中的所有点，检查它们是否在圆圈中。

  // convert the directions response to polylines
  renderDirectionsPolylines(response);
  // check to see if any of the points from the route are in the circle
  for (var i = 0; i < polylines.length; i++) {
    for (var j = 0; j < polylines[i].getPath().getLength(); j++) {
      if (google.maps.geometry.spherical.computeDistanceBetween(polylines[i].getPath().getAt(j), circle.getCenter()) < circle.getRadius()) {
        console.log("route intersects circle at:" + polylines[i].getPath().getAt(j).toUrlValue(6));
      }
    }
  }

proof of concept fiddle

代码段

＆＃13;

＆＃13;

var map;

function initMap() {
  var pointA = new google.maps.LatLng(51.7519, -1.2578),
    pointB = new google.maps.LatLng(50.8429, -0.1313),
    pointC = new google.maps.LatLng(51.2029, -0.1403),
    myOptions = {
      zoom: 7,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService,
    directionsDisplay = new google.maps.DirectionsRenderer({
      map: map,
      preserveViewport: true
    }),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "point A",
      label: "A",
      map: map
    }),
    markerB = new google.maps.Marker({
      position: pointB,
      title: "point B",
      label: "B",
      map: map
    }),
    markerC = new google.maps.Marker({
      position: pointC,
      title: "point C",
      label: "C",
      map: map
    });
  var circle = new google.maps.Circle({
    map: map,
    radius: 1000, // 10 miles in metres
    fillColor: '#AA0000'
  });
  circle.bindTo('center', markerC, 'position');
  // get route from A to B
  calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB, circle);

}



function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB, circle) {
  directionsService.route({
    origin: pointA,
    destination: pointB,
    avoidTolls: true,
    avoidHighways: false,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      renderDirectionsPolylines(response);
      console.log("polylines=" + polylines.length);
      for (var i = 0; i < polylines.length; i++) {
        for (var j = 0; j < polylines[i].getPath().getLength(); j++) {
          if (google.maps.geometry.spherical.computeDistanceBetween(polylines[i].getPath().getAt(j), circle.getCenter()) < circle.getRadius()) {
            console.log("route intersects circle at:" + polylines[i].getPath().getAt(j).toUrlValue(6));
            var mark = new google.maps.Marker({
              map: circle.getMap(),
              position: polylines[i].getPath().getAt(j),
              icon: {
                url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
                size: new google.maps.Size(7, 7),
                anchor: new google.maps.Point(3.5, 3.5)
              }
            });
            circle.getMap().fitBounds(circle.getBounds());
            // document.getElementById('result').innerHTML += "route intersects circle at:"+polylines[i].getPath().getAt(j).toUrlValue(6)+"<br>";
          }
        }
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
var polylineOptions = {
  strokeColor: '#C83939',
  strokeOpacity: 1,
  strokeWeight: 4
};
var polylines = [];

function renderDirectionsPolylines(response) {
  for (var i = 0; i < polylines.length; i++) {
    polylines[i].setMap(null);
  }
  var legs = response.routes[0].legs;
  for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
      }
      polylines.push(stepPolyline);
      stepPolyline.setMap(map);
      // route click listeners, different one on each step
      google.maps.event.addListener(stepPolyline, 'click', function(evt) {
        infowindow.setContent("you clicked on the route<br>" + evt.latLng.toUrlValue(6));
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
      })
    }
  }
}
initMap();

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map-canvas {
  height: 100%;
  width: 100%;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="result"></div>
<div id="map-canvas"></div>

＆＃13;

＆＃13;

＆＃13;