Which segment of a polyline was clicked?

Go To StackoverFlow.com

0

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.

2012-04-04 19:32
by Heitor Chang


5

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.

2012-04-05 08:07
by Engineer
Best solution I've seen. It only breaks (division by zero) if segments are exactly horizontal or vertical but this is unlikely to happen in practice, since I'm having the user place the markers by hand - Heitor Chang 2012-04-05 13:34
@HeitorChang Ah, yes , you are right about horizontal and vertical cases,which I have missed. I have updated my answer. Please check - Engineer 2012-04-05 19:47
Thanks for being thorough. I would upvote again if I could : - Heitor Chang 2012-04-05 19:50
@HeitorChang You're welcome - Engineer 2012-04-05 19:52
Ads