MapmyIndia Android SDK — добавление кластеризации маркеров

Опубликовано: 22 Февраля, 2023

Много раз в приложениях для 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
    xmlns:tools="http://schemas.android.com/tools"
    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();
    }
}

Теперь запустите ваше приложение, чтобы увидеть результат.

Выход: