احسب المسافة بين نقطتين على خرائط قوقل

قد تحتاج في تطبيقك الى حساب المسافة بين نقطتين كما في تطبيقات التوصيل او تطبيقات المطاعم . في هذا الدرس سنتعلم طريقة حساب المسافة المتوقعة بين نقطتين على خرائط قوقل بابسط الطرق باذن الله .

في البداية يجب ان تكون على علم بطريقة اضافة خرائط قوقل في التطبيق شرحتها هنا .
تحتاج فقط الى تفعيل خيار Google Maps Directions API.

ملف AndroidManifest.xml :
سيكون شكل ملف AndroidManifest.xml بهذا الشكل :

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.androidtutorialpoint.googlemapsdistancecalculator"
          xmlns:android="https://schemas.android.com/apk/res/android">
 
    <!--
         The ACCESS_COARSE/FINE_LOCATION permissions are not required to use
         Google Maps Android API v2, but you must specify either coarse or fine
         location permissions for the 'MyLocation' functionality. 
    -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
 
        <!--
             The API key for Google Maps-based APIs is defined as a string resource.
             (See the file "res/values/google_maps_api.xml").
             Note that the API key is linked to the encryption key used to sign the APK.
             You need a different API key for each encryption key, including the release key that is used to
             sign the APK for publishing.
             You can define the keys for the debug and release targets in src/debug/ and src/release/. 
        -->
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="@string/google_maps_key"/>
 
        <activity
            android:name=".MapsActivity"
            android:label="@string/title_activity_maps">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
 
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
 
</manifest>

ملف تصميم شاشة Map :
سنحتاج لاضافة TextView & 2 Buttons احدهم لحساب المسافة بالسير على الاقدام والاخر لحسابها بقيادة السيارة وTextView لعرض المسافة والوقت المستغرق لقطعها .

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout="@layout/activity_maps" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:layout_gravity="bottom"
        android:orientation="vertical">

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/show_distance_time"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#000"
            android:textColorHighlight="@android:color/primary_text_dark"
            android:textSize="30sp" />

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/show_distance"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#000"
            android:textColorHighlight="@android:color/primary_text_dark"
            android:textSize="30sp" />

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.AppCompatButton
                style="@style/Base.Widget.AppCompat.Button.Borderless.Colored"
                android:id="@+id/btnDriving"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/driving_mode" />

            <android.support.v7.widget.AppCompatButton
                style="@style/Base.Widget.AppCompat.Button.Borderless.Colored"
                android:id="@+id/btnWalk"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/walking_mode" />
        </LinearLayout>

    </LinearLayout>
</FrameLayout>

اضافة المسافة باستخدام Retrofit :
بيانات المسافة تعود الى التطبيق على هيئة JSON وسنقوم باستخدام retrofit لتحليلها ورسمها على الخريطة.
تم شرح Retrofit هنا .
سيكون شكل البيانات الراجعه بهذا الشكل . نلاحظ احتوائها على مصفوفات وعناصر JSON . بطبيعة الحال قمت بتحويلها الى POJO واضافتها للتطبيق .

سيتم رفع التطبيق يمكنك تحميل الملفات من خلاله
انشاء interface :
سنقوم بانشاء interface وسنقوم بتسميته مثلاً : RetrofitMap.java
```
public interface RetrofitMaps {
    @GET("api/directions/json?key=AIzaSyC22GfkHu9FdgT9SwdCWMwKX1a4aohGifM&language=ar")
    Call<Example> getDistanceDuration(@Query("origin") String origin, @Query("destination") String destination, @Query("mode") String mode);
}
```
نلاحظ في الشفرة السابقة استخدمنا @GET وهي احد عمليات HTTP الموجودة في مكتبة Retrofit وايضاٍ قمنا بوضع المفاتيح داخل getDistanceDuration وهي (origin, mode and destination) وهي قيم متغيره بحسب موقع المستخدم والخيارات التي يقوم بها .

رسم الطريق على الخريطة :
الان سنقوم بتنفيذ عملية الاسترداد باستخدام Retrofit .

 for (int i = 0; i < response.body().getRoutes().size(); i++) {
                        String distance = response.body().getRoutes().get(i).getLegs().get(i).getDistance().getText();
                        String time = response.body().getRoutes().get(i).getLegs().get(i).getDuration().getText();
                        ShowDistanceDuration.setText("المسافة :" + distance);
                        ShowDistance.setText("الوقت المتوقع:" + time);
                        String encodedString = response.body().getRoutes().get(0).getOverviewPolyline().getPoints();
                        List<LatLng> list = decodePoly(encodedString);
                        line = mMap.addPolyline(new PolylineOptions()
                                        .addAll(list)
                                        .width(20)
                                        .color(Color.BLUE)
                                        .geodesic(true)
                        );
                    }

في الكود السابق قمنا بعملية دوران لجميع المارك ماب ورسمها على الخريطة باستخدام addPolyline . سيقوم التطبيق برسم خط ازرق بين الموقعين يوضح فيها الطريق على الخريطة ويطبع الوقت المستغرق والمسافة المتوقعة .