Добавьте маркеры вдоль маршрута - PullRequest
Новая
       40

Добавьте маркеры вдоль маршрута

1 голос
/ 07 марта 2012

Я пытаюсь создать несколько маркеров вдоль маршрута из направлений карт Google. Я уже рассматривал путевые точки как вариант, но, основываясь на моем понимании документации по нему, он создает маршрут из точки A в точку B и проходит через точки, которые вы установили, чтобы добраться из точки A в точку B. I Я не хочу, чтобы мой маршрут рассчитывался на основе заданных путевых точек. Мне нужна заранее определенная начальная и конечная точки, а мои путевые точки рассчитываются на основе расстояния на карте. Например, маркер создавался каждые столько миль вдоль маршрута. Будут ли путевые точки делать это? Если да, то есть ли примеры, где это было сделано?

Есть предложения?

Ответы [ 3 ]

6 голосов
/ 07 марта 2012

Как сказал Эндрю, путевые точки не будут этого делать.

У вас нет предопределенных точек для маршрута (например, eaxmple), поэтому вы можете сделать следующее:

Направление состоит из точек, определенных в route-> Overview_path, что определяетполилиния для маршрута.

Таким образом, вы можете пройти по этому пути, рассчитать расстояние между двумя точками пути, используя google.maps.geometry.spherical.computeDistanceBetween() и создать маркер, когда желаемое расстояние будет достигнуто.

Вот реализация предложения: http://jsfiddle.net/doktormolle/eNzFb/

<edit>

Обратите внимание: этот ответ устарел.Вместо этого лучше использовать встроенную IconSequence .

1 голос
/ 02 декабря 2017

Пример, который размещает маркеры каждые 1 милю вдоль маршрута, возвращенного службой маршрутов:

http://www.geocodezip.com/v3_kmMarkersFromDirections.html

enter image description here

фрагмент кода: 

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var polyline = null;
var gmarkers = [];
var infowindow = new google.maps.InfoWindow();

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  polyline = new google.maps.Polyline({
    path: [],
    strokeColor: '#FF0000',
    strokeWeight: 3
  });


  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsDisplay);
  var onChangeHandler = function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  };
  document.getElementById('btn').addEventListener('click', onChangeHandler);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      polyline.setPath([]);
      var bounds = new google.maps.LatLngBounds();
      startLocation = new Object();
      endLocation = new Object();
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      // For each route, display summary information.
      var path = response.routes[0].overview_path;
      var legs = response.routes[0].legs;
      for (i = 0; i < legs.length; i++) {
        if (i == 0) {
          startLocation.latlng = legs[i].start_location;
          startLocation.address = legs[i].start_address;
          // marker = google.maps.Marker({map:map,position: startLocation.latlng});
          marker = createMarker(legs[i].start_location, "start", legs[i].start_address, "green");
        }
        endLocation.latlng = legs[i].end_location;
        endLocation.address = legs[i].end_address;
        var steps = legs[i].steps;
        for (j = 0; j < steps.length; j++) {
          var nextSegment = steps[j].path;
          for (k = 0; k < nextSegment.length; k++) {
            polyline.getPath().push(nextSegment[k]);
            bounds.extend(nextSegment[k]);
          }
        }
      }

      polyline.setMap(map);
      for (var i = 0; i < gmarkers.length; i++) {
        gmarkers[i].setMap(null);
      }
      gmarkers = [];
      var points = polyline.GetPointsAtDistance(1000);
      for (var i = 0; i < points.length; i++) {
        var marker = new google.maps.Marker({
          map: map,
          position: points[i],
          title: i + 1 + " mile"
        });
        marker.addListener('click', openInfoWindow);
      }

    } else {
      alert("directions response " + status);
    }
  });


  /*  function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    }); */
}
google.maps.event.addDomListener(window, 'load', initMap);

function createMarker(latlng, label, html, color) {
  // alert("createMarker("+latlng+","+label+","+html+","+color+")");
  var contentString = '<b>' + label + '</b><br>' + html;
  var marker = new google.maps.Marker({
    position: latlng,
    // draggable: true, 
    map: map,
    icon: getMarkerImage(color),
    title: label,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });
  marker.myname = label;
  gmarkers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  return marker;
}
var icons = new Array();
icons["red"] = {
  url: "http://maps.google.com/mapfiles/ms/micons/red.png"
};

function getMarkerImage(iconColor) {
  if ((typeof(iconColor) == "undefined") || (iconColor == null)) {
    iconColor = "red";
  }
  if (!icons[iconColor]) {
    icons[iconColor] = {
      url: "http://maps.google.com/mapfiles/ms/micons/" + iconColor + ".png"
    };
  }
  return icons[iconColor];

}

function openInfoWindow() {
  var contentString = this.getTitle() + "<br>" + this.getPosition().toUrlValue(6);
  infowindow.setContent(contentString);
  infowindow.open(map, this);
}

// === A method which returns an array of GLatLngs of points a given interval along the path ===
google.maps.Polyline.prototype.GetPointsAtDistance = function(metres) {
  var next = metres;
  var points = [];
  // some awkward special cases
  if (metres <= 0) return points;
  var dist = 0;
  var olddist = 0;
  for (var i = 1;
    (i < this.getPath().getLength()); i++) {
    olddist = dist;
    dist += google.maps.geometry.spherical.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1));
    while (dist > next) {
      var p1 = this.getPath().getAt(i - 1);
      var p2 = this.getPath().getAt(i);
      var m = (next - olddist) / (dist - olddist);
      points.push(new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m));
      next += metres;
    }
  }
  return points;
}
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

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

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
<div id="floating-panel">
  <b>Start: </b>
  <input id="start" value="New York, NY" />
  <b>End: </b>
  <input id="end" value="Newark, NJ" />
  <input id="btn" value="Get Directions" type="button" />
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
0 голосов
/ 07 марта 2012

Нет. Путевые точки определяют путь маршрута, как вы нашли. Вы хотите поместить «путевые точки» вдоль маршрута в зависимости от того, какой путь определен.

Это возможно, и у Ларри есть пример на http://www.geocodezip.com/v3_polyline_example_kmmarkers.html

...