javascript - Which segment of a polyline was clicked?

Question

I have set up a sample polyline with five segments, and I'm allowing new markers to be created when the user clicks on the polyline.

I'd like to know if there's a foolproof way to determine whether the new marker is between markers 0 and 1, or 1 and 2 ... or between 4 and 5. I've considered checking if the new marker is inside a bounding box, and point-in-line formulas, but neither is 100% precise.

Answer 1

As Google Maps uses Mercator Projection for projecting GPS coordinates, you can't use 'line equation' for gps coordinates, because projection is not linear for gps points.But instead you can use world coordinates which are linear. Here I have used parametric form of line equation to check whether point on segment:

function isPointOnSegment( map, gpsPoint1, gpsPoint2, gpsPoint ){
     var p1 = map.getProjection().fromLatLngToPoint( gpsPoint1 );
     var p2 = map.getProjection().fromLatLngToPoint( gpsPoint2 );
     var p = map.getProjection().fromLatLngToPoint( gpsPoint );
     var t_x;
     var t_y;
     //Parametric form of line equation is:
     //--------------------------------
     //      x = x1 + t(x2-x1)
     //      y = y1 + t(y2-y1) 
     //--------------------------------
     //'p' is on [p1,p2] segment,if 't' is number from [0,1]
     //-----Case 1----
     //      x = x1
     //      y = y1
     //---------------
     if( p2.x-p1.x == 0 && p2.y-p1.y == 0){
        return p.x == p1.x && p.y == p1.y;
     }else 
     //-----Case 2----
     //      x = x1
     //      y = y1 + t(y2-y1)
     //---------------
     if( p2.x-p1.x == 0 && p2.y-p1.y != 0){
        t_y = (p.y - p1.y)/(p2.y-p1.y);
        return p.x == p1.x && t_y >= 0 && t_y <= 1;
     }else
     //-----Case 3----
     //      x = x1 + t(x2-x1)
     //      y = y1 
     //---------------
     if( p2.x-p1.x != 0 && p2.y-p1.y == 0){
        t_x = (p.x - p1.x)/(p2.x-p1.x);
        return p.y == p1.y && t_x >= 0 && t_x <= 1;
     }
     //-----Case 4----
     //      x = x1 + t(x2-x1)
     //      y = y1 + t(y2-y1) 
     //---------------
     t_x = (p.x - p1.x)/(p2.x-p1.x);
     t_y = (p.y - p1.y)/(p2.y-p1.y);
     return ( t_x == t_y && t_x >= 0 && t_x <= 1 && t_y >= 0 && t_y <= 1);
} 

By having clicked point and all segments of polyline, you could use above implemented function and retrieve segment you were looking for.