google maps api 3 - Position of an icon on a polyline -
context: animating icon along polyline, represents car going point b. @ point in time car low on fuel, hence, need go gas station , afterwards continue point b.
hence, when car low on fuel, compute car's current position , make directions request current position point b, gas station waypoint.
once i've got answer, update polyline on car animated (i retain accomplished parts , replace remaining parts new route).
the problem computed "current position" of car way inaccurate (i.e. the computed position differs actual position of icon on polyline).
here minimal working example , fiddle:
var map; var line; var first_path; function initmap() { pointa = new google.maps.latlng(50.931300, 4.226360); pointb = new google.maps.latlng(48.858370, 2.294481); var myoptions = { zoom: 7, center: pointa }; map = new google.maps.map(document.getelementbyid('map-canvas'), myoptions); // instantiate directions service. var directionsservice = new google.maps.directionsservice, directionsdisplay = new google.maps.directionsrenderer({ map: map }), markera = new google.maps.marker({ position: pointa, title: "point a", label: "a", map: map }), markerb = new google.maps.marker({ position: pointb, title: "point b", label: "b", map: map }); // route b calculateanddisplayroute(directionsservice, directionsdisplay, pointa, pointb); } function calculateanddisplayroute(directionsservice, directionsdisplay, pointa, pointb) { directionsservice.route({ origin: pointa, destination: pointb, avoidtolls: true, avoidhighways: false, travelmode: google.maps.travelmode.driving }, function (response, status) { if (status == google.maps.directionsstatus.ok) { //directionsdisplay.setdirections(response); console.debug(response); first_path = response.routes[0].overview_path; // make polyline on path line = new google.maps.polyline({ path: first_path, strokecolor: 'black', strokeopacity: 1, icons: [{ icon: { path: google.maps.symbolpath.circle, scale: 5, strokecolor: '#393', strokeopacity: 0.8 }, offset: '90%' }] }); line.setmap(map); // add marker @ same position icon --> inaccurate var loc = line.getpointatdistance(line.distance() * 0.9); var marker = new google.maps.marker({ position: loc, map: map, title: 'wrong position!' }); } else { window.alert('directions request failed due ' + status); } }); } initmap();
please note using epoly v3 library computation.
are there other libraries or ways compute current position might work?
Comments
Post a Comment