MapmyIndia Android SDK — добавление кластеризации маркеров
Много раз в приложениях для Android мы видим, что нам нужно отображать несколько маркеров. Если маркеры, отображаемые на картах, расположены близко друг к другу, мы видим, что маркеры перекрывают друг друга. В этом случае многие приложения отображают количество маркеров, присутствующих в этом месте, вместо отображения самого маркера. Этот метод отображения количества маркеров называется кластеризацией маркеров. В этой статье мы рассмотрим, как добавить кластеризацию маркеров на карту «Мои карты Индии» в приложении для Android. Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.
Note: This Android article covered in both Java and Kotlin languages.
Пошаговая реализация
Шаг 1. Создайте новый проект в Android Studio.
Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать/запустить новый проект в Android Studio ».
Шаг 2. Загрузка SDK для Map My India
Перейдите по ссылке и загрузите jar-файл для Map My India SDK. После загрузки скопируйте файл, чтобы добавить его в наш проект. Перейдите в раздел «Проект» в своем проекте Android Studio. Затем перейдите в «Имя проекта»> «Приложение»> «Библиотеки». Щелкните его правой кнопкой мыши и просто вставьте загруженный файл jar в эту папку.
Шаг 3: Добавление зависимости в файл build.gradle
Перейдите к файлу app> build.gradle и добавьте к нему приведенную ниже зависимость в разделе зависимостей.
implementation "com.google.code.gson:gson:2.3" implementation files("libs/map_sdk_2.1.jar")
После добавления зависимости просто синхронизируйте свой проект.
Шаг 4: Работа с файлом activity_main.xml
Перейдите к app > res > layout > activity_main.xml и добавьте в него приведенный ниже код. В код добавлены комментарии для более подробного ознакомления.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < RelativeLayout android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" > <!--on below line we are creating a map view--> < com.mmi.MapmyIndiaMapView android:id = "@+id/idMapView" android:layout_width = "match_parent" android:layout_height = "match_parent" /> </ RelativeLayout > |
Шаг 5. Добавление разрешений в файл AndroidManifest.xml
Перейдите к файлу app>AndroidManifest.xml и добавьте к нему указанные ниже разрешения.
XML
< uses-permission android:name = "android.permission.ACCESS_COARSE_LOCATION" /> < uses-permission android:name = "android.permission.ACCESS_FINE_LOCATION" /> < uses-permission android:name = "android.permission.ACCESS_WIFI_STATE" /> < uses-permission android:name = "android.permission.ACCESS_NETWORK_STATE" /> < uses-permission android:name = "android.permission.INTERNET" /> < uses-permission android:name = "android.permission.WRITE_EXTERNAL_STORAGE" /> |
Теперь добавьте приведенный ниже код в тег приложения в файле AndroidManifest.xml, чтобы использовать устаревшую библиотеку в нашем приложении.
XML
< uses-library android:name = "org.apache.http.legacy" android:required = "false" /> |
Шаг 6. Создание ключа API для использования Map My India SDK.
Перейдите по ссылке. Зарегистрируйтесь, указав свой адрес электронной почты и пароль, и вы увидите экран ниже. Внутри этого перейдите на вкладку учетных данных, чтобы увидеть свой ключ API. Скопируйте этот ключ API, который мы должны использовать в нашем проекте.
Шаг 7: Создание модального класса для модели маркера
Перейдите к приложению> java> имени пакета вашего приложения> щелкните его правой кнопкой мыши> «Создать»> класс Java/Kotlin и назовите его как MarkerModel и добавьте к нему приведенный ниже код. Комментарии добавлены в код, чтобы узнать его в деталях.
Kotlin
package com.gtappdevelopers.mapmyindiakotlin import com.mmi.util.GeoPoint data class MarkerModel( // on below line creating variable // for title and geo point val title: String, val geoPoint: GeoPoint ); |
Java
package com.gtappdevelopers.mapmyindia; import com.mmi.util.GeoPoint; public class MarkerModel { // creating variables on below line. private String title; private GeoPoint geoPoint; public MarkerModel(String title, String imageUrl, String description, String subDescription, GeoPoint geoPoint) { this .title = title; this .geoPoint = geoPoint; } public String getTitle() { return title; } public void setTitle(String title) { this .title = title; } public MarkerModel(String title, GeoPoint geoPoint) { this .title = title; this .geoPoint = geoPoint; } public GeoPoint getGeoPoint() { return geoPoint; } public void setGeoPoint(GeoPoint geoPoint) { this .geoPoint = geoPoint; } } |
Шаг 8: Работа с файлом MainActivity
Перейдите к приложению > java > имени пакета вашего приложения > файлу MainActivity и добавьте в него приведенный ниже код. В код добавлены комментарии для более подробного ознакомления.
Kotlin
package com.gtappdevelopers.mapmyindiakotlin import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import com.mmi.LicenceManager import com.mmi.MapmyIndiaMapView import com.mmi.layers.Marker import com.mmi.layers.MarkerClusterer import com.mmi.util.GeoPoint import java.util.* class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) // on below line we are setting rest api key and map sdk key. LicenceManager.getInstance().restAPIKey = "Enter your API key" LicenceManager.getInstance().mapSDKKey = "Enter your API key" // on below line we are creating variables for map view and initializing it. val mapmyIndiaMapView = findViewById<MapmyIndiaMapView>(R.id.idMapView) // on below line we are getting our map view. val mapView = mapmyIndiaMapView.mapView // on below line we are creating an array list to display all markers. val markerModels: ArrayList<MarkerModel> = ArrayList<MarkerModel>() // on below line adding marker title and geo point to it. markerModels.add(MarkerModel( "Location 1" , GeoPoint( 28.549356 , 77.26780099999999 ))) markerModels.add(MarkerModel( "Location 2" , GeoPoint( 28.551844 , 77.26749 ))) markerModels.add(MarkerModel( "Location 3" , GeoPoint( 28.554454 , 77.265473 ))) markerModels.add(MarkerModel( "Location 4" , GeoPoint( 28.549637999999998 , 77.262909 ))) markerModels.add(MarkerModel( "Location 5" , GeoPoint( 28.555245 , 77.266117 ))) markerModels.add(MarkerModel( "Location 6" , GeoPoint( 28.558149 , 77.269787 ))) // on below line creating a marker cluster val markerClusterer = MarkerClusterer( this ) // on below line setting color for marker cluster. markerClusterer.setColor(resources.getColor(R.color.purple_200)) // on below line setting anchor text for marker cluster markerClusterer.mAnchorV = Marker.ANCHOR_CENTER markerClusterer.mTextAnchorV = Marker.ANCHOR_CENTER // on below line setting text size. markerClusterer.setTextSize( 12 ) // on below line creating a list for geo points val points = ArrayList<GeoPoint>() // on below line running a loop for setting markers. for (markerModel in markerModels) { // on below line we are creating a marker. val marker = Marker(mapView) // on below line setting title // and position for marker. marker.title = markerModel.title marker.position = markerModel.geoPoint // on below line adding related // object for marker model. marker.relatedObject = markerModel markerClusterer.add(marker) points.add(markerModel.geoPoint) } // on below line we are setting // bounds for map view. mapView.setBounds(points) // on below line adding marker cluster. mapView.overlays.add(markerClusterer) mapView.invalidate() } } |
Java
package com.gtappdevelopers.mapmyindia; import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import com.mmi.LicenceManager; import com.mmi.MapView; import com.mmi.MapmyIndiaMapView; import com.mmi.layers.Marker; import com.mmi.layers.MarkerClusterer; import com.mmi.util.GeoPoint; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); // on below line we are setting rest api key and map sdk key. LicenceManager.getInstance().setRestAPIKey( "Enter your API key" ); LicenceManager.getInstance().setMapSDKKey( "Enter your API key" ); // on below line we are creating variables for map view and initializing it. MapmyIndiaMapView mapmyIndiaMapView = findViewById(R.id.idMapView); // on below line we are getting our map view. MapView mapView = mapmyIndiaMapView.getMapView(); // on below line we are creating an array list to display all markers. ArrayList<MarkerModel> markerModels = new ArrayList<>(); // on below line adding marker title and geo point to it. markerModels.add( new MarkerModel( "Location 1" , new GeoPoint( 28.549356 , 77.26780099999999 ))); markerModels.add( new MarkerModel( "Location 2" , new GeoPoint( 28.551844 , 77.26749 ))); markerModels.add( new MarkerModel( "Location 3" , new GeoPoint( 28.554454 , 77.265473 ))); markerModels.add( new MarkerModel( "Location 4" , new GeoPoint( 28.549637999999998 , 77.262909 ))); markerModels.add( new MarkerModel( "Location 5" , new GeoPoint( 28.555245 , 77.266117 ))); markerModels.add( new MarkerModel( "Location 6" , new GeoPoint( 28.558149 , 77.269787 ))); // on below line creating a marker cluster MarkerClusterer markerClusterer = new MarkerClusterer( this ); // on below line setting color for marker cluster. markerClusterer.setColor(getResources().getColor(R.color.purple_200)); // on below line setting anchor text for marker cluster markerClusterer.mAnchorV = Marker.ANCHOR_CENTER; markerClusterer.mTextAnchorV = Marker.ANCHOR_CENTER; // on below line setting text size. markerClusterer.setTextSize( 12 ); // on below line creating a list for geo points ArrayList<GeoPoint> points = new ArrayList<>(); // on below line running a loop for setting markers. for (MarkerModel markerModel : markerModels) { // on below line we are creating a marker. Marker marker = new Marker(mapView); // on below line setting title and position for marker. marker.setTitle(markerModel.getTitle()); marker.setPosition(markerModel.getGeoPoint()); // on below line adding related object for marker model. marker.setRelatedObject(markerModel); markerClusterer.add(marker); points.add(markerModel.getGeoPoint()); } // on below line we are setting bounds for map view. mapView.setBounds(points); // on below line adding marker cluster. mapView.getOverlays().add(markerClusterer); mapView.invalidate(); } } |
Теперь запустите ваше приложение, чтобы увидеть результат.
Выход: