I am already creating an application using Google V2 maps and overlay 2 markers on the map. The first token is to get the user's current location, and the second token is the user's destination. And then I add the decodePoly method to draw a line between these markers. I also add a method to provide information about the duration, start address, and destination address using the warning dialog.
So, when I click on the second marker, I want to animate this marker to “move” to the first marker. But my problem is that the second marker does not move along the path of the polyline. You can see in the image below:
This is MapActivity.java:
@Override public boolean onMarkerClick(Marker arg0) { // if user click the first marker if(this.lokasi_asli.equals(arg0)){ AlertDialog.Builder alert = new AlertDialog.Builder(MapActivity.this); alert.setTitle("First Position") .setIcon(R.drawable.ic_launcher) .setCancelable(true) .setMessage("First Position : " + "\n" + loc_a) .setPositiveButton("Yes", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); } }) .setNegativeButton("No", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); } }); alert.show(); } else if (this.lokasi_tujuan.equals(arg0)) { //if user click second marker final boolean hideMarker = false; final Handler handler = new Handler(); final long start = SystemClock.uptimeMillis(); Projection proj = gmap.getProjection(); Point startPoint = proj.toScreenLocation(lokasi_tujuan.getPosition()); final LatLng startLatLng = proj.fromScreenLocation(startPoint); final long duration = 5000; final Interpolator interpolator = new LinearInterpolator(); handler.post(new Runnable() { @Override public void run() { long elapsed = SystemClock.uptimeMillis() - start; float t = interpolator.getInterpolation((float) elapsed / duration); double longid = t * lokasi_asli.getPosition().longitude + (1-t) * startLatLng.longitude; double latid = t * lokasi_asli.getPosition().latitude + (1-t) * startLatLng.latitude; lokasi_tujuan.setPosition(new LatLng(latid, longid)); if(t < 1.0){ // handler.postDelayed(this, 16); } else { if(hideMarker){ lokasi_tujuan.setVisible(false); } else { lokasi_tujuan.setVisible(true); } } } });
fetching data from google map:
@Override protected void onPostExecute(Void result){ super.onPostExecute(result); if(doc != null){ NodeList _nodelist = doc.getElementsByTagName("status"); Node node1 = _nodelist.item(0); String _status1 = node1.getChildNodes().item(0).getNodeValue(); if(_status1.equalsIgnoreCase("OK")) { NodeList _nodelist_path = doc.getElementsByTagName("overview_polyline"); Node node_path = _nodelist_path.item(0); Element _status_path = (Element)node_path; NodeList _nodelist_destination_path = _status_path.getElementsByTagName("points"); Node _nodelist_dest = _nodelist_destination_path.item(0); String _path = _nodelist_dest.getChildNodes().item(0).getNodeValue(); List<LatLng> directionPoint = decodePoly(_path); PolylineOptions rectLine = new PolylineOptions().width(10).color(Color.RED).geodesic(true); for (int i = 0; i < directionPoint.size(); i++) { rectLine.add(directionPoint.get(i)); } gmap.addPolyline(rectLine); mark_opt.position(new LatLng(dest_lat, dest_long)); mark_opt.draggable(true); mark_opt.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE)); lokasi_tujuan = gmap.addMarker(mark_opt); } else { Toast.makeText(MapActivity.this, "Maaf, Tidak dapat menemukan rute tujuan\nCoba pilih rute lain yang mendekati", Toast.LENGTH_LONG).show(); } progres_dlg.dismiss(); } } }
How to make the second marker move along the path of the polyline? Any ideas or help would be greatly appreciated. Environment: Windows 7, Eclipse, Genymotion.
source share