Как разместить маркеры на существующей полилинии?

Question

Полилинию уже нарисовали карту, но как можно разместить на ней маркеры?

Текущий код:

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

loadShowDates(); 

var polyFutureOptions = { 
    path: pathFutureCoordinates, 
    strokeColor: '#0000FF', 
    strokeOpacity: 0.8, 
    strokeWeight: 2.5 
}; 

var polyPastOptions = { 
    path: pathPastCoordinates, 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.6, 
    strokeWeight: 2.5 
}; 

pathPast = new google.maps.Polyline(polyPastOptions); 
pathFuture = new google.maps.Polyline(polyFutureOptions); 
pathPast.setMap(map); 
pathFuture.setMap(map); 
infowindow = new google.maps.InfoWindow(); 
map.fitBounds(bounds); 

Есть два множества точек: pathFutureCoordinates и pathPastCoordinates, и они относятся к выступлениям в прошлом и концертам в будущем все на экскурсионный маршруте (ломаная линия). Каждый набор маркеров может быть другого цвета.

Что я буду использовать для этого, пожалуйста?

Любые другие советы? Пользовательский маркер был бы идеальным.

страница сайта в вопрос: http://goo.gl/H995E

Answer 1

Вот страница, где маркеры размещаются либо расширить единую ломаную линию (нажмите на карту), или когда место в ломаной линии щелкнул, маркер добавляется к ломаная. Вы можете проверить, правильно ли был помещен новый маркер, перетащив его и увидев, что линия отрегулирует сегменты.

https://files.nyu.edu/hc742/public/googlemaps/distance2.html

Я не уверен, если вы планируете добавить новые маркеры на линии, нажав или нет. Я опишу, как добавить маркеры с кликами на странице выше. Наличие предварительно составленного списка LatLngs будет намного проще (вам понадобятся только шаги 3 и 4 ниже).

1. Добавить слушатель для обнаружения щелчков на линии (линия выполнена толщиной, чтобы помочь в мыши)
2. выяснить, какой сегмент линии был нажат
3. Добавить маркер в массив маркеров, размещение он находится в правильном положении (порядок, основанный на том, какие маркеры вокруг него окружают)
4. Перерисовать линию, используя новый массив маркеров LatLngs.

В строку добавлен прослушиватель кликов.

google.maps.event.addListener(line, 'click', function(event) { 
     for (var i = 0 ; i < markers.length - 1; i++) { 
     if(isPointOnSegment(markers[i].getPosition(), 
      markers[i+1].getPosition(),event.latLng)) { 
      addMarker(event.latLng, i+1); 
      break; 
     } 
     } 
    }); 
    } 

Потому что мы должны знать, какой сегмент была нажата, вспомогательная функция называется (isPointOnSegment)

function isPointOnSegment(gpsPoint1, gpsPoint2, gpsPoint){ 

    //Provided by Engineer 
    // http://stackoverflow.com/questions/10018003/which-segment-of-a-polyline-was-clicked 
    // 1st version, ignores perfectly horiz and vert. lines 
    var p1 = map.getProjection().fromLatLngToPoint(gpsPoint1); 
    var p2 = map.getProjection().fromLatLngToPoint(gpsPoint2); 
    var p = map.getProjection().fromLatLngToPoint(gpsPoint); 

    var t_x = (p.x - p1.x)/(p2.x-p1.x); 
    var t_y = (p.y - p1.y)/(p2.y-p1.y); 
    return (eq(t_x,t_y) && t_x >= 0 && t_x <= 1 && t_y >= 0 && t_y <= 1); 
    } 

Добавить маркер и обновление позиции маркера Массив:

function addMarker(pos, where) { 

    var marker = new google.maps.Marker({ 
     map: map, 
     position: pos, 
     draggable: true 
    }); 

    markers.splice(where,0,marker); 
    drawPath(); 
    } 

Наконец, перерисуйте линию

function drawPath() { 
    countMarkers(); 
    var coords = []; 
    for (var i = 0; i < markers.length; i++) { 
     coords.push(markers[i].getPosition()); 
    } 
    line.setPath(coords); 
    } 

Для добавления маркеров, где есть уже существующие координаты

http://jsfiddle.net/WZqgE/1/

var pathFutureCoordinates = [ 
    new google.maps.LatLng(40, -80), 
    new google.maps.LatLng(38, -85), 
    new google.maps.LatLng(39, -92), 
    new google.maps.LatLng(42, -98), 
    new google.maps.LatLng(37, -102)  
    ]; 
    for (var i = 0; i < pathFutureCoordinates.length; i++) { 
    new google.maps.Marker({ 
     map: map, 
     position: pathFutureCoordinates[i], 
     icon: "http://maps.google.com/mapfiles/kml/pal4/icon39.png" 
    }); 
    }