Разместить маркер на полилинии с определенным расстоянием

Question

Я сделал карту Google, используя Google Map API V3 и поместил ломаную линию на карту, вот мой код для моей карты

function initialize() {
            var myLatLng = new google.maps.LatLng(31.77577, 72.26588);
            var mapOptions = {
                zoom: 15,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.HYBRID
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var flightPlanCoordinates = [
      new google.maps.LatLng(31.77577, 72.26588),
      new google.maps.LatLng(31.75715, 72.25918),
      new google.maps.LatLng(31.7379, 72.2415),
      new google.maps.LatLng(31.717362, 72.226646),
      new google.maps.LatLng(31.720063, 72.216905),
      new google.maps.LatLng(31.714514, 72.206905),
      new google.maps.LatLng(31.7086, 72.186735),
      new google.maps.LatLng(31.702685, 72.177294)

  ];
            var flightPath = new google.maps.Polyline({
                path: flightPlanCoordinates,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 2
            });

            flightPath.setMap(map);
        }

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

Теперь я хочу разместить маркер на этой полилинии на каждые 1 км. Пожалуйста, помогите разместить маркер на 1 км на полилинии.

Answer 1

Это работает для меня (добавлено в конец вашей функции инициализации):

var i=1;
var length = google.maps.geometry.spherical.computeLength(flightPath.getPath());
var remainingDist = length;

while (remainingDist > 0)
{
   createMarker(map, flightPath.GetPointAtDistance(1000*i),i+" km");
   remainingDist -= 1000;
   i++;
}
// put markers at the ends
createMarker(map,flightPath.getPath().getAt(0),length/1000+" km");
createMarker(map,flightPath.getPath().getAt(flightPath.getPath().getLength()-1),(length/1000).toFixed(2)+" km");
flightPath.setMap(map);
}

function createMarker(map, latlng, title){
    var marker = new google.maps.Marker({
          position:latlng,
          map:map,
          title: title
          });
}

пример

Answer 2

Я не смог развернуть логику в моем случае, так как создание моих маркеров разделено, так как я определяю first и útilmo, и другие разметки, эта функция вызывается в конце initialize():

function calcRoute() {
var myTrip=[];
var bounds = new google.maps.LatLngBounds();
    <c:forEach var="listaCoord" varStatus="posicao" items="${listaCoord}">

        var dt = '${listaCoord.dtSistema}';                 
        var cod = '${listaCoord.codDaf}';
        var lat = '${listaCoord.idLatitude}';
        var lng = '${listaCoord.idLongitude}';
        var bt = '${listaCoord.bateria}';

        var pt = new google.maps.LatLng(lat, lng);

        myTrip.push(pt);
        bounds.extend(pt);

        <c:choose>
            <c:when test="${posicao.first}">
                dt = dt + ' - <b>ATUAL</b>';
                atual = pt;
                createMarkerAtual(pt,cod,dt,bt,map);
            </c:when>

            <c:when test="${posicao.last}">
                dt = dt + ' - <b>PARTIDA</b>';
                inicio = pt;
                createMarkerPartida(pt,cod,dt,bt,map);
            </c:when>

            <c:otherwise>
                createMarker(pt,cod,dt,bt,map);
            </c:otherwise>
        </c:choose>

    </c:forEach>

    var flightPath = new google.maps.Polyline({
           path:myTrip,
           strokeColor:"#0000FF",
           strokeOpacity:0.5,
           strokeWeight:4
         });

    flightPath.setMap(map);
    map.fitBounds(bounds);
}

эта функция создает маркеры (без начала, без конечной точки):

function createMarker(point,info,dt,bt,map) {
var iconURL = 'img/pata.png';               
var iconSize = new google.maps.Size(32,34);
var iconOrigin = new google.maps.Point(0,0);    
var iconAnchor = new google.maps.Point(15,30);

var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);

var marker = new google.maps.Marker({
  position : point,
  html : info,
  map : map,
  icon: myIcon
});   

google.maps.event.addListener(marker, 'click', function() {
    endereco(info,this.position,dt,bt);
    infowindow.open(map,this);
});

}