Sabtu, 02 November 2013

Cara Android Menggambar garis pada GoogleMap

Android Draw Line On GoogleMap (Android Menggambar garis pada GoogleMap).
Beberapa waktu yang lalu ada pembaca yang menanyakan kepada saya, ingin membuat aplikasi jalur angkot. Apakah dimungkinkan untuk menggambar garis yang bukan direction (otomatis dibuat oleh google). Sebetulnya kalau kita mencari jawabannya digoogle itu dapat kita dapatkan. Tapi syaratnya keywordnya gunakan bahasa inggris. Oke langsung saja pada kesempatan ini kita akan membuat project yang goalnya adalah Menggambar Garis pada GoggleMap (Draw Line in GoogleMap Android).
Mari kita ikuti langkah-langkanya
  1. Buka Eclipse lalu buat New Android Project, isi parameternya dengan dibawah ini
Application NameDrawLineMap
Project NameDrawLineMap
Package Namecom.agus.haryanto.net.draw.linemap
Activity NameDrawLineMapActivity
Layout Namemain


2. Edit File main.xml
01<?xml version="1.0" encoding="utf-8"?>
02<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
03    android:layout_width="fill_parent"
04    android:layout_height="fill_parent">
05 
06    <com.google.android.maps.MapView
07        android:id="@+id/mapview"
08        android:layout_width="fill_parent"
09        android:layout_height="fill_parent"
10        android:enabled="true"
11        android:clickable="true"
12        android:apiKey="0bvY2ipiUvzSKVO0TO4N8iIeWp4oSfPY7TcUUTQ"
13        />
14 
15    <LinearLayout android:id="@+id/zoomview"
16        android:layout_width="wrap_content"
17        android:layout_height="wrap_content"
18        android:layout_alignParentBottom="true"
19        android:layout_centerHorizontal="true"
20        />
21 
22</RelativeLayout>
note: android:apiKey harus diganti dengan key map yang kita dapatkan dari google. caranya ada pada tutorial map yang awal.
 
3. Edit AndroidManifest.xml lalu ketikkan kode berikut
01<?xml version="1.0" encoding="utf-8"?>
02<manifest xmlns:android="http://schemas.android.com/apk/res/android"
03    package="com.agus.haryanto.net.draw.linemap"
04    android:versionCode="1"
05    android:versionName="1.0" >
06 
07    <uses-sdk android:minSdkVersion="7" />
08<uses-permission android:name="android.permission.INTERNET"></uses-permission>
09    <application
10        android:icon="@drawable/ic_launcher"
11        android:label="@string/app_name" >
12         <uses-library android:name="com.google.android.maps" />
13        <activity
14            android:name=".DrawLineMapActivity"
15            android:label="@string/app_name" >
16            <intent-filter>
17                <action android:name="android.intent.action.MAIN" />
18 
19                <category android:name="android.intent.category.LAUNCHER" />
20            </intent-filter>
21        </activity>
22    </application>
23 
24</manifest>

4. Edit class DrawLineMapActivity.java lalu ketikan kode berikut
01package com.agus.haryanto.net.draw.linemap;
02 
03import java.util.ArrayList;
04import java.util.List;
05 
06import android.graphics.Canvas;
07import android.graphics.Color;
08import android.graphics.Paint;
09import android.graphics.Path;
10import android.graphics.Point;
11import android.os.Bundle;
12 
13import com.google.android.maps.GeoPoint;
14import com.google.android.maps.MapActivity;
15import com.google.android.maps.MapView;
16import com.google.android.maps.Overlay;
17import com.google.android.maps.Projection;
18 
19public class DrawLineMapActivity extends MapActivity {
20    private List<Overlay> mapOverlays;
21 
22    private Projection projection;
23    private MapView mapView = null;
24 
25    @Override
26    public void onCreate(Bundle savedInstanceState) {
27        super.onCreate(savedInstanceState);
28        setContentView(R.layout.main);
29 
30        mapView = (MapView) findViewById(R.id.mapview);
31        mapView.setBuiltInZoomControls(true);
32        mapView.getController().setZoom(13);
33        GeoPoint gP1 =new GeoPoint((int) (-6.144651 * 1E6), (int) (106.728058 * 1E6));
34        mapView.getController().animateTo(gP1);
35        // overlay which may be displayed on top of a map
36        mapOverlays = mapView.getOverlays();
37        //translate between the coordinate system of x/y on-screen pixel coordinates
38        //and that of latitude/longitude points on the surface of the earth
39        projection = mapView.getProjection();
40        mapView.postInvalidate();
41        mapOverlays.add(new MyOverlay());
42 
43    }
44 
45    @Override
46    protected boolean isRouteDisplayed() {
47        return false;
48    }
49 
50    class MyOverlay extends Overlay{
51 
52        public MyOverlay(){
53 
54        }
55        private  List<GeoPoint> points = new ArrayList<GeoPoint>();
56        public void draw(Canvas canvas, MapView mapv, boolean shadow){
57            super.draw(canvas, mapv, shadow);
58 
59            Paint   mPaint = new Paint();
60            mPaint.setDither(true);
61            mPaint.setColor(Color.RED);
62            mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
63            mPaint.setStrokeJoin(Paint.Join.ROUND);
64            mPaint.setStrokeCap(Paint.Cap.ROUND);
65            mPaint.setStrokeWidth(2);
66 
67            GeoPoint gP1 =new GeoPoint((int) (-6.144651 * 1E6), (int) (106.728058 * 1E6));
68            GeoPoint gP2 =new GeoPoint((int) (-6.174689 * 1E6), (int) (106.732178 * 1E6));
69            GeoPoint gP3 =new GeoPoint((int) (-6.178785 * 1E6), (int) (106.747284 * 1E6));
70            GeoPoint gP4 =new GeoPoint((int) (-6.161718 * 1E6), (int) (106.775436 * 1E6));
71            points.clear();
72            points.add(gP1);
73            points.add(gP2);
74            points.add(gP3);
75            points.add(gP4);
76            Point p1 = new Point();
77            Point p2 = new Point();
78            Path path = new Path();
79 
80           for  (int i=0;i < points.size()-1; i++){
81                 projection.toPixels(points.get(i), p1);
82                 projection.toPixels(points.get(i+1), p2);
83                  path.moveTo(p2.x, p2.y);
84                  path.lineTo(p1.x,p1.y);
85            }
86            canvas.drawPath(path, mPaint);
87 
88        }
89}
90}  

5. Saatnya kita Run Programnya, jika sudah benar semua maka tampilannya akan terlihat seperti dibawah ini

Diposting oleh di
Label: , , , , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)