استفاده از نقشه های گوگل در اندروید

استفاده از نقشه های گوگل در اندروید

 

 

ساختن برنامه ها با Google Maps به شما امکان می دهد ویژگی هایی مانند تصاویر ماهواره ای ، کنترل های سفارشی شده برای نقشه ها ، ردیابی مکان و نشانگرهای مکان را به برنامه خود اضافه کنید. می توانید با نمایش اطلاعاتی از مجموعه داده های خود مانند مکان های ماهیگیری یا کوهنوردی شناخته شده ، به نقشه های گوگل اطلاعات اضافه کنید. شما همچنین می توانید بازی هایی بسازید که در آن بازیکن به جستجوی دنیای فیزیکی بپردازید ، مانند بازی های شکار گنج یا حتی واقعیت افزوده.

در این مقاله ، یک برنامه  به نام Wander  (پرسه زدن) می سازیم که نقشه های سفارشی و موقعیت کاربر را در نقشه نشان می دهد.

 

پیش نیازها

 

برای استفاده از این مقاله باید دانش کافی در موارد زیر داشته باشید:

• نحوه ایجاد یک برنامه معمولی Android و اجرای آن با استفاده از Android Studio.
• نحوه ایجاد و مدیریت منابع در پروژه ، مانند String ها.
• نحوه تغییر کد و تغییر نام متغیرها با استفاده از Android Studio.
• نحوه استفاده از نقشه گوگل به عنوان کاربر.
• نحوه درخواست مجوزهای لازم در زمان اجرا.
• آشنایی مقدماتی با زبان کاتلین

 

مواردی که در این مقاله می آموزید

 

• چگونه می توان یک کلید API از Google API Console دریافت کرد و چگونه کلید برنامه را ثبت کرد
• نحوه ادغام نقشه گوگل در برنامه خود
• نحوه نمایش انواع نقشه های مختلف
• نحوه تغییر استایل نقشه گوگل
• روش اضافه کردن نشان گذاری ها به نقشه
• نحوه اجازه دادن به کاربر برای قرار دادن نشانگر در یک نقطه مورد علاقه (POI یا Point Of Interest)
• روش فعال کردن ردیابی مکان
• نحوه ایجاد برنامه Wander ، که دارای نقشه گوگل به صورت داخلی است
• نحوه ایجاد ویژگی های سفارشی برای برنامه خود ، مانند نشانگرها و یک ظاهر سفارشی شده
• چگونگی استفاده از ردیابی مکان در برنامه خود

 

 

 

نمای کلی برنامه

 

در این مقاله ، برنامه ای به نام Wander را ایجاد می کنیم، که یک نقشه گوگل را با یک ظاهر خاص نشان می دهد. برنامه Wander به کاربر امکان می دهد مکان ها را نشان گذاری کند ، موارد دلخواه را روی نقشه مشخص کند و مکان خود را در هر لحظه ببینید.

 

 

ایجاد پروژه و دریافت API Key

 

بکار گیری Maps SDK برای اندروید به یک کلید API نیاز دارد. برای به دست آوردن کلید API ، پروژه خود را در صفحه API & Services ثبت کنید. کلید API به یک گواهینامه دیجیتال گره خورده است که برنامه را به نویسنده آن متصل می کند.

در این مقاله ، از کلید API برای گواهی اشکال زدایی (debug certificate) استفاده می کنیم.  گواهی اشکال زدایی از نظر طراحی ناامن است چون برای تست برنامه است. برنامه های منتشر شده اندرویدی که از Maps SDK استفاده می کنند ، به کلید API دوم نیاز دارند: کلید گواهی انتشار (release certificate).

Android Studio دارای یک الگو برای اکتیویتی نقشه گوگل است که کدهای مفیدی را به صورت خودکار ایجاد می کند. بخشی از کد این الگو شامل یک فایل google_maps_api.xml است. درون این فایل لینکی است که به دست آوردن کلید API را ساده می کند.

 

این قسمت شامل سه مرحله است:

مرحله اول: ساختن پروژه Wander با الگوی نقشه ها

1. یک پروژه جدید Android Studio ایجاد کنید.
2. الگوی «  Google Maps Activity  » را انتخاب کنید.

   3. نام پروژه را Wander بگذارید.

   4. حداقل سطح API (minimum API) را روی API 19 تنظیم کنید. مطمئن شوید زبان Kotlin است.

   5. روی Finish کلیک کنید.

پس از ساخت برنامه ، نگاهی به پروژه خود و فایلهای مربوط به نقشه ها که Android Studio برای شما ایجاد می کند ، بیندازید:

google_maps_api.xml - شما برای نگه داشتن کلید API خود از این فایل پیکربندی استفاده می کنید. الگوی انتخابی در مرحله قبل دو فایل google_maps_api.xml ایجاد می کند: یکی برای اشکال زدایی (debug) و دیگری برای انتشار (release). فایل کلید API برای گواهی اشکال زدایی در پوشه src/debug/res/values واقع شده است. فایل کلید API برای گواهی انتشار در پوشه src/release/res/values  قرار دارد. در این مقاله، شما فقط از گواهی اشکال زدایی استفاده می کنید.

activity_maps.xml - این فایل layout شامل یک fragment است که کل صفحه را پر می کند. کلاس SupportMapFragment یک زیر کلاس از کلاس Fragment است. SupportMapFragment ساده ترین راه برای قرار دادن نقشه در یک برنامه است. این فرگمنت یک پوشش در اطراف نمای نقشه است و به طور خودکار به رویدادهای چرخه زندگی (life cycle) نقشه رسیدگی می کند.

شما می توانید با استفاده از یک برچسب <fragment> در هر ViewGroup ی ، با ویژگی name زیر ، SupportMapFragment را در یک فایل layout قرار دهید:

android:name="com.google.android.gms.maps.SupportMapFragment"

کلاس MapsActivity.kt در متد onCreate  به فرگمنت SupportMapFragment که در layout قرار داده شده دسترسی پیدا می کند و از متد getMapAsync این SupportMapFragment  استفاده می کند تا به صورت خودکار سیستم نقشه ها و view را مقدار دهی کند. برای این منظور اکتیویتی که شامل SupportMapFragment است باید اینترفیس OnMapReadyCallback و متد onMapReady آن را پیاده سازی کند. هنگام بار گذاری نقشه ، متد onMapReady از اینترفیس OnMapReadyCallback فراخوانی می شود.

 

توجه: اگر اکنون برنامه را اجرا کنید ، نقشه بارگیری نمی شود. اگر به log های مربوطه نگاه کنید ، پیامی را مشاهده می کنید که می گوید کلید API شما به درستی تنظیم نشده است. در مرحله بعدی ، کلید API را به دست می آورید تا برنامه نقشه را نمایش دهد.

توجه: اگر برنامه Wander را روی شبیه ساز آزمایش می کنید ، باید از یک شبیه ساز که شامل Google Play است استفاده کنید. شبیه سازی را انتخاب کنید که Google Play را در ستون Target در لیست دستگاه های مجازی نشان دهد:

 

مرحله دوم: بدست آوردن کلید API

1. نسخه debug فایل google_maps_api.xml را باز کنید.
2. در فایل ، به دنبال یک کامنت با آدرس اینترنتی طولانی بگردید. پارامترهای این آدرس شامل اطلاعات خاصی درباره این برنامه شما هستند.
3. آدرس را در یک مرورگر کپی کنید.
4. برای ایجاد یک پروژه در صفحه « APIs & Services» ، دستورالعمل ها را دنبال کنید. به دلیل پارامترهای موجود در آدرس ارائه شده ، این صفحه می داند که به طور خودکار Maps SDK را برای اندروید فعال کند.
5. روی «Create an API Key» کلیک کنید.
6. در صفحه بعد ، به قسمت API Keys بروید و روی کلیدی که تازه ایجاد کرده اید کلیک کنید.
7. «Restrict Key» را کلیک کنید و Maps SDK را برای Android انتخاب کنید تا استفاده از کلید را به برنامه های اندروید محدود کنید.
8. کلید API تولید شده را کپی کنید. این کلید با "AIza" شروع می شود
9. در فایل google_maps_api.xml ، کلید را در رشته google_maps_key جایی که نوشته شده YOUR_KEY_HERE قرار دهید.
10. برنامه خود را اجرا کنید. شما باید یک نقشه تعبیه شده در activity خود با یک نشانگر تنظیم شده در شهر سیدنی ، استرالیا مشاهده کنید. (نشانگر سیدنی بخشی از الگوی پیش فرض است و بعداً آن را تغییر می دهید.)

توجه: ممکن است فعال شدن کلید API تا 5 دقیقه طول بکشد. همچنین ممکن است لازم باشد Android Studio را دوباره راه اندازی کنید.

 

مرحله ۳: تغییر نام mMap

MapsActivity دارای یک «private lateinit var» به نام mMap است که از نوع GoogleMap است. برای پیروی از قراردادهای نامگذاری کاتلین ، نام mMap را به map تغییر دهید.

1. در MapsActivity ، روی mMap کلیک راست کرده و ...Refactor> Rename را کلیک کنید.
2. نام متغیر را به map تغییر دهید.

توجه کنید که چگونه همه ارجاع ها به mMap در متد onMapReady نیز به map تغییر می کنند.

 

 

افزودن انواع نقشه ها

 

نقشه های گوگل شامل چندین نوع نقشه است: عادی (normal) ، ماهواره ای (satellite) ،  ترکیبی (hybrid) ، زمین (terrain) و "هیچ" (none) (بدون هیچ نقشه ای).  در تصاویر زیر انواع این نقشه ها را به ترتیب می بینید:

نقشه عادی (normal)

 

 

ماهواره ای (satellite)

 

 

ترکیبی (hybrid)

 

 

زمین (terrain)

 

 

هر نوع نقشه ، انواع مختلفی از اطلاعات را ارائه می دهد. به عنوان مثال ، هنگام استفاده از نقشه ها برای ناوبری در ماشین ، دیدن نام خیابان ها مفید است ، بنابراین می توانید از گزینه معمولی استفاده کنید. هنگام کوه نوردی ، نقشه زمین می تواند برای تصمیم گیری در مورد میزان صعود بیشتر برای رسیدن به قله مفید باشد.

 

در این فعالیت شما:

1. یک نوار برنامه با یک منوی گزینه اضافه می کنید که به کاربر امکان تغییر نوع نقشه را می دهد.
2. مکان شروع نقشه را به مکان خانه خود منتقل می کنید.
3. امکان افزودن نشانگرها که مکانهایی را روی نقشه نشان می دهند و می توانند دارای برچسب نیز باشند ، را در برنامه فراهم می کنید.

 

افزودن منو برای انواع نقشه ها

 

در این مرحله ، شما یک نوار برنامه با یک منوی گزینه اضافه می کنید که به کاربر اجازه می دهد نوع نقشه را تغییر دهد.

1. برای ایجاد یک فایل منوی XML ، روی پوشه res خود راست کلیک کرده و گزینه New> Android Resource File را انتخاب کنید.
2. در کادر دیالوگ ، نام فایل را map_options بگذارید.
3. نوع منبع (resource type) را menu انتخاب کنید.
4. روی OK کلیک کنید.
5. در برگه Code ، کد موجود در فایل جدید را با کد زیر جایگزین کنید تا گزینه های منوی نقشه ایجاد شود. نوع نقشه "none" را حذف کردیم زیرا "none" منجر به فقدان  نقشه می شود. این مرحله باعث خطا می شود (چون هنوز عنوان ها را در فایل strings.xml وارد نکرده ایم) ، اما در مرحله بعدی آن را برطرف می کنید.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item
       android:id="@+id/normal_map"
       android:title="@string/normal_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/hybrid_map"
       android:title="@string/hybrid_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/satellite_map"
       android:title="@string/satellite_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/terrain_map"
       android:title="@string/terrain_map"
       app:showAsAction="never" />
</menu>

     6. در فایل strings.xml برای رفع خطاها منابعی را برای ویژگی های title (عنوان منوهای بالا) اضافه کنید.

<resources>
   ...
   <string name="normal_map">Normal Map</string>
   <string name="hybrid_map">Hybrid Map</string>
   <string name="satellite_map">Satellite Map</string>
   <string name="terrain_map">Terrain Map</string>
   <string name="lat_long_snippet">Lat: %1$.5f, Long: %2$.5f</string>
   <string name="dropped_pin">Dropped Pin</string>
   <string name="poi">poi</string>
</resources>

  7. در MapsActivity ، متد onCreateOptionsMenu را override کنید و منوها را از فایل map_options بخوانید.

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
   val inflater = menuInflater
   inflater.inflate(R.menu.map_options, menu)
   return true
}

   8. در MapsActivity.kt ، متد onOptionsItemSelected را override کنید. با استفاده از ثابت های نوع نقشه ، نوع نقشه را تغییر دهید تا انتخاب کاربر را اعمال کنید.

// Clicksite
// Email: clicksite.ir@gmail.com
override fun onOptionsItemSelected(item: MenuItem) = when (item.itemId) {
   // Change the map type based on the user's selection.
   R.id.normal_map -> {
       map.mapType = GoogleMap.MAP_TYPE_NORMAL
       true
   }
   R.id.hybrid_map -> {
       map.mapType = GoogleMap.MAP_TYPE_HYBRID
       true
   }
   R.id.satellite_map -> {
       map.mapType = GoogleMap.MAP_TYPE_SATELLITE
       true
   }
   R.id.terrain_map -> {
       map.mapType = GoogleMap.MAP_TYPE_TERRAIN
       true
   }
   else -> super.onOptionsItemSelected(item)
}

   9. برنامه را اجرا کنید.

 10. برای تغییر نوع نقشه منو را کلیک کنید. توجه کنید که چگونه ظاهر نقشه بین حالت های مختلف تغییر می کند.

 

 

افزودن نشانگرها

 

به طور پیش فرض ، رویداد onMapReady شامل کدی است که در شهر سیدنی استرالیا ، جایی که Google Maps ایجاد شده است ، یک نشانگر قرار می دهد. رویداد پیش فرض همچنین نقشه را جابجا می کند تا به شهر سیدنی منتقل شود.

در این فعالیت ، شما می خواهید دوربین نقشه را به خانه خود منتقل کنید ، تا اندازه ای که مشخص کرده اید بزرگنمایی کنید و یک نشانگر در آن قرار دهید.

 

مرحله اول: بزرگنمایی کردن خانه و افزودن نشانگر در مکان آن

 

1. در فایل MapsActivity.kt ، متد onMapReady را پیدا کنید. کدی را که نشانگر را در سیدنی قرار می دهد و دوربین را حرکت می دهد حذف کنید. اکنون متد شما باید به شکل زیر باشد.

override fun onMapReady(googleMap: GoogleMap) {
   map = googleMap

}

    2. طول جغرافیایی و عرض جغرافیایی خانه خود را پیدا کنید.

    3. یک متغیر برای طول جغرافیایی و یک متغیر برای عرض جغرافیایی ایجاد کنید و مقادیر آنها را برابر طول و عرض جغرافیایی خانه خود قرار دهید.

val latitude = 37.422160
val longitude = -122.084270

    4. یک شی LatLng جدید به نام homeLatLng ایجاد کنید. در شی homeLatLng مقادیری را که تازه ایجاد کرده اید وارد کنید.

val homeLatLng = LatLng(latitude, longitude)

    5. برای اینکه چقدر می خواهید روی نقشه بزرگنمایی کنید یک val ایجاد کنید. از سطح بزرگنمایی 15f استفاده کنید.

val zoomLevel = 15f

سطح بزرگنمایی میزان بزرگنمایی شما بر روی نقشه را کنترل می کند. لیست زیر به شما ایده می دهد که هر سطح از بزرگنمایی چه سطح از جزئیات را نشان می دهد:

• سطح ۱ : جهان
• سطح ۵ : خشکی ها و قاره ها
• سطح ۱۰ : شهر ها
• سطح ۱۵ : خیابان ها
• سطح ۲۰ : ساختمان ها

 

    6. با فراخوانی متد moveCamera بر روی شی map از طریق ارسال شی CameraUpdate با کمک CameraUpdateFactory.newLatLngZoom  ، دوربین را به homeLatLng منتقل کنید. شی homeLatLng و میزان بزرگنمایی (zoomLevel) را به newLatLngZoom  ارسال کنید:

map.moveCamera(CameraUpdateFactory.newLatLngZoom(homeLatLng, zoomLevel))

    7. در homeLatLng یک نشانگر به نقشه اضافه کنید:

map.addMarker(MarkerOptions().position(homeLatLng))

متد نهایی شما باید به این شکل باشد:

override fun onMapReady(googleMap: GoogleMap) {
   map = googleMap

   //These coordinates represent the latitude and longitude of the Googleplex.
   val latitude = 37.422160
   val longitude = -122.084270
   val zoomLevel = 15f

   val homeLatLng = LatLng(latitude, longitude)
   map.moveCamera(CameraUpdateFactory.newLatLngZoom(homeLatLng, zoomLevel))
   map.addMarker(MarkerOptions().position(homeLatLng))
}

    8. برنامه خود را اجرا کنید. نقشه باید به سمت خانه شما حرکت کند ، تا حد دلخواه بزرگ شود و یک نشانگر روی خانه شما قرار دهد.

 

 

مرحله دوم: به کاربران اجازه می دهیم با استفاده از یک کلیک طولانی نشانگر اضافه کنند

 

در این مرحله ، وقتی کاربر مکانی را روی نقشه لمس کرده و نگه می دارد ، یک نشانگر اضافه می کنیم.

 

1. در MapsActivity یک متد به نام setMapLongClick ایجاد کنید که یک GoogleMap را به عنوان آرگومان دریافت کند.
2. متد setOnMapLongClickListener از شی map را فراخوانی کنید:

private fun setMapLongClick(map:GoogleMap) {
   map.setOnMapLongClickListener { }
}

      3. در setOnMapLongClickListener ، متد addMarker را فراخوانی کنید و یک شی جدید MarkerOptions با موقعیت تنظیم شده به LatLng به آن ارسال کنید:

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       map.addMarker(
           MarkerOptions()
               .position(latLng)
       )
   }
}

     4. در انتهای متد onMapReady ، متد setMapLongClick را با آرگمان map فراخوانی کنید:

override fun onMapReady(googleMap: GoogleMap) {
   ...
  
   setMapLongClick(map)
}

    5. برنامه را اجرا کنید.

   6. برای قرار دادن نشانگر در یک مکان ، نقشه را لمس کرده و نگه دارید.

  7. روی نشانگر ضربه بزنید ، که آن را در مرکز صفحه قرار می دهد.

توجه: با ضربه زدن به یک نشانگر ، دکمه های پیمایش ظاهر می شوند و به کاربر اجازه می دهد تا از برنامه Google Maps برای حرکت به موقعیت مشخص شده استفاده کند.

 

مرحله سوم: یک پنجره اطلاعات برای نشانگر اضافه کنید

 

در این مرحله ، یک InfoWindow اضافه می کنید که مختصات نشانگر را هنگام لمس نشانگر نشان می دهد.

 

1. در setOnMapLongClickListener ، یک val برای snippet ایجاد کنید. snippet متنی اضافی است که زیر عنوان نمایش داده می شود. snippet شما طول و عرض جغرافیایی مکانی که نشانگر روی آن است را نمایش می دهد:

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       // A snippet is additional text that's displayed after the title.
       val snippet = String.format(
           Locale.getDefault(),
           "Lat: %1$.5f, Long: %2$.5f",
           latLng.latitude,
           latLng.longitude
       )
       map.addMarker(
           MarkerOptions()
               .position(latLng)
       )
   }
}

      2. در addMarker ، عنوان نشانگر را برابر String دلخواه قرار بدید مثلاً در اینجا عنوان را رشته  R.string.dropped_pin قرار دادیم که عبارت Dropped Pin است.

      3. snippet نشانگر را برابر عبارت snippet تنظیم کنید.

متد کامل شده به صورت زیر است:

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       // A Snippet is Additional text that's displayed below the title.
       val snippet = String.format(
           Locale.getDefault(),
           "Lat: %1$.5f, Long: %2$.5f",
           latLng.latitude,
           latLng.longitude
       )
       map.addMarker(
           MarkerOptions()
               .position(latLng)
               .title(getString(R.string.dropped_pin))
               .snippet(snippet)
              
       )
   }
}

    4. برنامه را اجرا کنید.

   5. برای افزودن یک نشانگر مکان ، نقشه را لمس کنید و نگه دارید.

   6. برای نشان دادن پنجره اطلاعات ، روی نشانگر ضربه بزنید.

 

مرحله چهارم: شنونده POI اضافه کنید

 

به طور پیش فرض ، نقاط مورد علاقه (POI یا Point of Interest) همراه با آیکون های مربوطه روی نقشه نشان داده می شوند. POI ها شامل پارک ها ، مدارس ، ساختمان های دولتی و موارد دیگر است. وقتی نوع نقشه روی حالت عادی تنظیم می شود ، POI های تجاری نیز روی نقشه ظاهر می شوند. POI های کسب و کار نمایانگر مشاغلی مانند فروشگاه ها ، رستوران ها و هتل ها هستند.

در این مرحله ، شما یک GoogleMap.OnPoiClickListener را به map اضافه می کنید. این متد با رسیدگی به رویداد کلیک ، بلافاصله وقتی کاربر روی POI کلیک می کند ، یک نشانگر روی نقشه قرار می دهد. رسیدگی کننده کلیک همچنین یک پنجره اطلاعات را نشان می دهد که حاوی نام POI است.

 

1. در MapsActivity یک متد خالی بنام setPoiClick ایجاد کنید که از GoogleMap به عنوان آرگومان استفاده کند.
2. در متد setPoiClick ، یک OnPoiClickListener را در GoogleMap وارد کنید:

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->

   }
}

      3. در setOnPoiClickListener ، یک val poiMarker برای نشانگر ایجاد کنید.

      4. با استفاده از map.addMarker با تنظیم MarkerOptions عنوان را به نام POI تنظیم کنید.

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->
       val poiMarker = map.addMarker(
           MarkerOptions()
               .position(poi.latLng)
               .title(poi.name)
       )
   }
}

    5. در تابع setOnPoiClickListener ، با فراخوانی showInfoWindow در poiMarker بلافاصله پنجره اطلاعات نمایش داده می شود.

poiMarker.showInfoWindow()

کد نهایی شما برای متد setPoiClick باید به این شکل باشد:

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->
       val poiMarker = map.addMarker(
           MarkerOptions()
               .position(poi.latLng)
               .title(poi.name)
       )
       poiMarker.showInfoWindow()
   }
}

   6. در انتهای onMapReady ، با آرگمان map متد  setPoiClick را فراخوانی کنید.

override fun onMapReady(googleMap: GoogleMap) {
   ...

   setPoiClick(map)
}

  7. برنامه خود را اجرا کنید و یک POI مثل پارک یا کافی شاپ پیدا کنید.

  8. روی POI ضربه بزنید تا یک نشانگر روی آن قرار دهید و نام POI را در یک پنجره اطلاعات نمایش دهید.

 

 

چگونه ظاهر نقشه را تغییر بدهید

 

می توان از بسیاری جهات نقشه های گوگل را شخصی سازی کرد و به نقشه ظاهر و جلوه ی بی نظیری داد.

می توانید یک شی MapFragment را با استفاده از ویژگی های موجود XML سفارشی کنید ، همانطور که هر fragment دیگری را سفارشی می کنید. با این حال ، در این مرحله ، شما با استفاده از متد های موجود در شی GoogleMap ، ظاهر و محتوای MapFragment را سفارشی می کنید.

برای ایجاد یک ظاهر سفارشی برای نقشه خود ، باید یک فایل JSON ایجاد کنید که نحوه نمایش ویژگی های نقشه را مشخص می کند. نیازی نیست که این فایل JSON را به صورت دستی ایجاد کنید. Google با استفاده از Google Platform Styling Wizard این امکان را برای شما فراهم کرده است که به صورت بصری ظاهر نقشه خود را مشخص کنید،  این برنامه با توجه به انتخاب های شما ، به صورت خودکار فایل JSON را برای شما تولید می کند. در اینجا، شما نقشه را با یک تمِ کلاسیک طراحی می کنید ، به این معنی که نقشه از رنگ های قدیمی استفاده می کند و شما جاده های رنگی اضافه می کنید.

توجه: تغییر ظاهر فقط برای نقشه هایی اعمال می شود که از نوع نقشه معمولی استفاده می کنند.

 

مرحله اول: یک style برای نقشه خود ایجاد کنید

 

1. با استفاده از مرورگر خود به سایت  https://mapstyle.withgoogle.com  مراجعه کنید.
2. گزینه «Create a Style» را انتخاب کنید.
3. گزینه «Retro» را انتخاب کنید. مانند تصویر زیر:

      4. روی «More Options» کلیک کنید.

     5. گزینه «Road > Fill» را انتخاب کنید:

     6. رنگ جاده ها به رنگ دلخواه تان تغییر دهید. مانند صورتی در تصویر زیر:

      7. روی Finish کلیک کنید.

     8. کد JSON را از این پنجره کپی کرده و در صورت تمایل ، آن را در یک فایل متنی ساده قرار دهید تا در مرحله بعدی استفاده کنید.

 

 

مرحله دوم: استایل حاصل از مرحله قبل را به نقشه خود اضافه کنید

 

1. در Android Studio ، در پوشه res ، یک پوشه از نوع «resource directory» ایجاد کنید و نام آن را raw بگذارید. از پوشه raw برای ذخیره فایل هایی مانند کد JSON استفاده می شود.
2. فایلی به نام map_style.json در پوشه res/raw ایجاد کنید.
3. کد JSON که در مرحله قبل بدست آوردید را در این فایل جدید جایگذاری کنید.
4. در MapsActivity ، یک متغیر کلاسی TAG بالاتر از متد onCreate ایجاد کنید. این متغیر را برای دیدن گزارش ها (logging) استفاده می کنیم.

private val TAG = MapsActivity::class.java.simpleName

5. همچنین در MapsActivity ، یک متد setMapStyle ایجاد کنید که آرگمان GoogleMap می گیرد.
6. در setMapStyle یک بلوک {}try اضافه کنید.
7. در بلوک {}try برای هنگام موفقیت در تغییر استایل متغیر  val success را ایجاد کنید. (بلوک catch را در ادامه اضافه می کنیم.)
8. داخل بلوک {}try استایل JSON را به map اضافه می کنیم، برای اینکار با فراخوانی متد setMapStyle از شی GoogleMap  و ارسال MapStyleOptions به آن فایل JSON را بارگذاری می کنیم.
9. نتیجه فراخوانی متد در مرحله قبل را در متغیر success قرار دهید. متد setMapStyle مقداری بولی باز می گرداند که نشان دهنده وضعیت موفقیت در خواندن فایل استایل و تنظیم آن در map است.

private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )
   }
}

  10. برای زمان ناموفق بودن یک عبارت if اضافه کنید. اگراستایل دهی ناموفق بود، یک گزارش که نشان دهنده تجزیه ناموفق JSON است چاپ کنید.

private fun setMapStyle(map: GoogleMap) {
   try {
       ...
       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   }
}

  11. برای رسیدگی به وضعیت یک فایل گمشده استایل ، یک بلوک {}catch اضافه کنید. در بلوک catch، اگر فایل پیدا نمی شود ، استثنا را مدیریت کنید این استثنا از نوع Resources.NotFoundException است.

private fun setMapStyle(map: GoogleMap) {
   try {
       ...
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}

متد تکمیل شده باید مانند قطعه کد زیر باشد:

private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )

       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}

 12. در آخر ، متد setMapStyle را در متد onMapReady با ارسال شی GoogleMap به آن فراخوانی کنید.

override fun onMapReady(googleMap: GoogleMap) {
   ...
   setMapStyle(map)
}

 13. برنامه را اجرا کنید.

 14. از طریق منوی برنامه ، نقشه را در حالت عادی (normal) قرار دهید حالا باید ظاهر جدید با تِم و جاده هایی با رنگ انتخابی شما قابل مشاهده باشد. مانند تصویر زیر:

توجه: اگر خیلی تصویر نقشه را کوچک کرده باشید ، نقشه دیگر جاده ها را نشان نمی دهد ، بنابراین آنها را نمی بینید.

 

 

مرحله سوم: تغییر ظاهر نشانگرها

 

با تغییر ظاهر نشانگرهای نقشه ، می توانید نقشه خود را حتی بیشتر شخصی کنید. در این مرحله ، ظاهر نشانگرهای قرمز پیش فرض را جذاب تر می کنیم.

 

1. در متد onMapLongClick ، کد زیر را به سازنده MarkerOptions اضافه کنید تا از نشانگر پیش فرض استفاده کند ، اما رنگ آن را به آبی تغییر دهید.

.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))

حالا کد onMapLongClickListener به صورت زیر می شود:

map.setOnMapLongClickListener { latLng ->
   // A snippet is additional text that's displayed after the title.
   val snippet = String.format(
       Locale.getDefault(),
       "Lat: %1$.5f, Long: %2$.5f",
       latLng.latitude,
       latLng.longitude
   )
   map.addMarker(
       MarkerOptions()
           .position(latLng)
           .title(getString(R.string.dropped_pin))
           .snippet(snippet)
         .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))
   )
}

      2. برنامه را اجرا کنید. نشانگرهایی که بعد از کلیک طولانی نشان داده می شوند ، اکنون آبی رنگ هستند. توجه داشته باشید که نشانگرهای POI هنوز قرمز هستند زیرا شما استایلی به متد onPoiClick اضافه نکرده اید.

 

افزودن لایه پوششی روی نقشه

 

یکی از راه های شخصی سازی نقشه Google ، ترسیم روی آن است. این روش در صورتی مفید است که بخواهید نوع خاصی از مکان ، مانند مکانهای معروف ماهیگیری را برجسته کنید.

 

• شکل ها: می توانید خط شکسته ، چند ضلعی و دایره به نقشه اضافه کنید.
• اشیای GroundOverlay: پوشش زمینی (Ground Overlay) تصویری است که روی نقشه ثابت می شود. برخلاف نشانگرها که معطوف به صفحه هستند ، پوشش های زمینی بیشتر معطوف به سطح زمین هستند. چرخش ، کج کردن یا بزرگنمایی نقشه ، جهت این عکس را نیز تغییر می دهد. وقتی می خواهید یک تصویر واحد را در یک قسمت از نقشه ثابت کنید ، پوشش های زمینی مفید هستند.

 

مراحل افزودن پوشش زمینی

 

در این فعالیت ، شما یک پوشش زمینی به شکل آیکون اندروید به مکان خانه خود اضافه می کنید.

 

1. این تصویر اندروید را دانلود کنید و آن را در پوشه res/drawable ذخیره کنید. (مطمئن شوید که نام فایل android.png باشد.)

     2. در onMapReady ، پس از دستور جابجایی برای انتقال دوربین به موقعیت خانه خود ، یک شی GroundOverlayOptions  ایجاد کنید.

     3. شی را در متغیری به نام androidOverlay قرار دهید.

val androidOverlay = GroundOverlayOptions()

    4. از متد BitmapDescriptorFactory.fromResource  برای ایجاد یک شی BitmapDescriptor از منبع تصویر بارگیری شده استفاده کنید.

    5. شی BitmapDescriptor حاصل را به متد image از شی GroundOverlayOptions ارسال کنید:

val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))

    6. یک متغیر از نوع float به نام overlaySize  ایجاد کنید که اندازه عرض (با واحد متر) از پوشش مورد نظر را مشخص کند. برای این مثال ، عرض 100f به خوبی کار می کند. حرف f در انتهای 100f برای تعیین نوع متغیر که از نوع float (اعشاری) است می باشد و علامت واحد نیست، واحد در اینجا متر فرض می شود.

با فراخوانی متد position با آرگمان های  homeLatLng و overlaySize  خاصیت موقعیت را برای شی  GroundOverlayOptions تنظیم کنید.

val overlaySize = 100f
val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
   .position(homeLatLng, overlaySize)

   7. متد addGroundOverlay از شی GoogleMap را فراخوانی کنید و آرگمان GroundOverlayOptions را به آن ارسال کنید.

map.addGroundOverlay(androidOverlay)

  8. برنامه را اجرا کنید.

  9. مقدار zoomLevel را به 18f تغییر دهید تا تصویر آیکون اندروید را به عنوان یک پوشش مشاهده کنید.

 10. نقشه را بچرخانید و کوچک و بزرگ کنید و تغییر تصویر به صورت هماهنگ با نقشه را ببینید.

 

 

استفاده از ردیابی مکان

 

کاربران اغلب از Google Maps برای دیدن مکان فعلی خود استفاده می کنند. برای نمایش مکان دستگاه روی نقشه خود ، می توانید از لایه داده موقعیت (location-data layer) استفاده کنید.

لایه داده موقعیت مکانی ، نماد موقعیت مکانی را به نقشه اضافه می کند. کاربر برای دیدن این لایه روی دکمه ای به شکل تصویر زیر ضربه می زند:

وقتی کاربر روی این دکمه ضربه می زند ، نقشه مکان دستگاه را در مرکز قرار می دهد. اگر دستگاه ثابت باشد، مکان به صورت یک نقطه آبی و اگر دستگاه در حرکت باشد مکان به صورت یک بالن آبی نشان داده می شود.

در این فعالیت ، شما لایه داده - مکان (location-data layer) را فعال می کنید.

 

مراحل درخواست مجوزهای مکان

 

فعال کردن ردیابی مکان در نقشه های گوگل (Google Maps) فقط به یک خط کد نیاز دارد. با این حال ابتدا باید مطمئن شوید که کاربر مجوزهای موقعیت مکانی را (با استفاده از مدل اجازه زمان اجرا یا runtime-permission) داده باشد.

در این مرحله ، شما مجوزهای موقعیت مکانی را درخواست و ردیابی مکان را فعال می کنید.

 

1. در فایل AndroidManifest.xml ، بررسی کنید که مجوز FINE_LOCATION از قبل موجود باشد. Android Studio هنگام انتخاب الگوی نقشه های گوگل این مجوز را باید وارد کرده باشد اگر اینطور نباشد آن را خودتان وارد کنید:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

      2. در MapsActivity ، یک متغیر کلاسی به نام REQUEST_LOCATION_PERMISSION ایجاد کنید.

private val REQUEST_LOCATION_PERMISSION = 1

      3. برای بررسی اعطای مجوزها ، در MapsActivity متدی به نام isPermissionGranted ایجاد کنید. در این متد بررسی کنید که کاربر اجازه داده باشد.

private fun isPermissionGranted() : Boolean {
  return ContextCompat.checkSelfPermission(
       this,
      Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_GRANTED
}

     4. برای فعال کردن ردیابی موقعیت مکانی در برنامه خود ، در MapsActivity متدی به نام enableMyLocation ایجاد کنید که هیچ آرگمانی نمی گیرد و هیچ چیزی را بر نمی گرداند. در این متد، مجوز ACCESS_FINE_LOCATION را بررسی کنید. در صورتی که مجوز داده شده ، لایه موقعیت را فعال کنید. در غیر این صورت ، اجازه را درخواست کنید.

private fun enableMyLocation() {
   if (isPermissionGranted()) {
       map.isMyLocationEnabled = true 
   }
   else {
       ActivityCompat.requestPermissions(
           this,
           arrayOf<String>(Manifest.permission.ACCESS_FINE_LOCATION),
           REQUEST_LOCATION_PERMISSION
       )
   }
}

    5. برای فعال کردن لایه موقعیت داخل متد onMapReady متد enableMyLocation  را فراخوانی کنید.

override fun onMapReady(googleMap: GoogleMap) {
   ...
   enableMyLocation()
}

    6. متد OnRequestPermissionsResult را override کنید. در این متد بررسی کنید که کد درخواست requestCode  برابر REQUEST_LOCATION_PERMISSION باشد. اگر اینطور باشد ، این بدان معنی است که مجوز داده شده است. در صورت اعطای مجوز ، بررسی کنید که آیا آرایه grantResults در اولین مکان خود دارای PackageManager.PERMISSION_GRANTED باشد. اگر اینطور باشد متد  enableMyLocation را فراخوانی کنید.

override fun onRequestPermissionsResult(
   requestCode: Int,
   permissions: Array<String>,
   grantResults: IntArray) {
   if (requestCode == REQUEST_LOCATION_PERMISSION) {
       if (grantResults.contains(PackageManager.PERMISSION_GRANTED)) {
           enableMyLocation()
       }
   }
}

  7. برنامه خود را اجرا کنید. باید کادر محاوره ای برای درخواست دسترسی به مکان دستگاه نمایش داده شود. مجوز را به برنامه بدهید.

توجه: اگر API سطح 29 را استفاده نمی کنید ، ممکن است ظاهر این کادر محاوره ای متفاوت باشد.

 

اکنون نقشه با استفاده از یک نقطه آبی مکان فعلی دستگاه را نمایش می دهد.

توجه داشته باشید که یک دکمه مکان وجود دارد. اگر نقشه را از مکان خود دور کنید و روی این دکمه کلیک کنید ، نقشه به مکان دستگاه باز می گردد:

توجه: وقتی برنامه را روی شبیه ساز اجرا می کنید ، ممکن است مکان در دسترس نباشد. اگر از تنظیمات شبیه ساز برای تعیین مکان استفاده نکرده باشید، دکمه مکان در دسترس نیست. پس در صورتی که از شبیه ساز استفاده می کنید باید داخل تنظیمات شبیه ساز طول و عرض جغرافیایی مکان را وارد کنید.

تبریک! شما یک نقشه گوگل را به یک برنامه اندرویدی اضافه کرده و ظاهر آن را نیز سفارشی کردید.