Javascript 如何在先前存在的多段线上放置标记？

地图上已经绘制了多段线，但如何在其上放置标记

当前代码：

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，它们指的是过去的GIG和将来的GIG，所有这些点都位于巡更路线（多段线）上。每组标记可以是不同的颜色

请问我用什么来做这个

还有其他建议吗？一个自定义标记将是理想的

---

有问题的站点页面：

这是一个页面，在该页面中放置标记以延伸单个多段线（在地图上单击），或者在单击多段线中的某个点时，将标记添加到多段线。通过拖动新标记并查看调整线段的直线，可以检查新标记是否正确放置

---

我不确定您是否计划通过单击在线条上添加新标记。我将在上面的页面中描述如何通过单击添加标记。拥有一个预先构建的latlng列表会简单得多（您只需要下面的步骤3和4）

添加侦听器以检测线路上的点击（线路变粗以帮助点击）

找出单击了哪一段线

将标记添加到标记数组中，将其放置在正确的位置（顺序，基于新标记围绕的标记）

使用新的标记条数组重新绘制线

单击侦听器将添加到行中

最后，重新绘制线条

函数drawPath（）{
countMarkers（）；
var-coords=[]；
对于（var i=0；i

用于在已有坐标的位置添加标记

var路径未来坐标=[
新的google.maps.LatLng（40，-80），
新的google.maps.LatLng（38，-85），
新的google.maps.LatLng（39，-92），
新google.maps.LatLng（42，-98），
新google.maps.LatLng（37，-102）
];
对于（变量i=0；i

..，}
..}“有一个预先构建的LatLngs列表”有：路径未来坐标，路径过去坐标我把这个问题误解为更复杂的问题。如果您想要在线条的每个“弯曲”处放置一个标记，并具有数组pathFuture/PastCoordinates，则可以在每个列表中循环并写入
pastMarker=new google.maps.marker（{map:map，position:pathPastCoordinates[i]}）
，或者如果您有MVCArray，则写入pathPastCoordinates.getAt（i）。如果需要保存标记的信息，可以创建一个标记数组。是的，在每个折弯处标记，无需保存。使用预先存在的数组：数组pathFuture/PastCoordinates——您能写出完整的代码以便剪切和粘贴（blush）。。会很有帮助的。Thx.我将为坐标值进行补齐。@Adrian33好的，我假设pathCoordinates具有相同的结构，一个LatLngs数组。我用一个路径和JS Fiddle的例子更新了上面的答案。可以在for循环内设置图标。我只是复制另一条路径的代码。
  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;
        } 
      }
    });
  }

  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);
  }

  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"
    });
  }