التصنيفات
Android مقالات

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

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

في البداية يجب ان تكون على علم بطريقة اضافة خرائط قوقل في التطبيق شرحتها هنا .
تحتاج فقط الى تفعيل خيار 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 . سيقوم التطبيق برسم خط ازرق بين الموقعين يوضح فيها الطريق على الخريطة ويطبع الوقت المستغرق والمسافة المتوقعة .

    شرحت الجديد فقط لحساب المواقع والمتبيقي موجود على github وايضاً موجود في المدرونة .

    شرح Google Map شرح Retrofit p1 ,p2

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني.