地図を表示させるアプリを作ろう!Android studio を使って地図にテキストピンを立てる方法

Android

前回はAndroid Studioでマップを表示させる方法について話した。

ただ、それだけだと味気がなく面白くない。そこで今回はマップにピンを立てる代わりにテキストを表示させる方法について紹介する。

コードは以下のようになる。

package com.example.map1;

import androidx.fragment.app.FragmentActivity;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Bundle;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.BitmapDescriptor;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
import com.example.map1.databinding.ActivityMapsBinding;

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {

    private GoogleMap mMap;
    private ActivityMapsBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        binding = ActivityMapsBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        // Obtain the SupportMapFragment and get notified when the map is ready to be used.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map once available.
     * This callback is triggered when the map is ready to be used.
     * This is where we can add markers or lines, add listeners or move the camera. In this case,
     * we just add a marker near Sydney, Australia.
     * If Google Play services is not installed on the device, the user will be prompted to install
     * it inside the SupportMapFragment. This method will only be triggered once the user has
     * installed Google Play services and returned to the app.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
        // Add a marker in Sydney and move the camera
        LatLng sydney = new LatLng(-34, 151);
        mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney").icon(getTextMarker("Hello")));
        mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
    }
    public BitmapDescriptor getTextMarker(String text) {

        Paint paint = new Paint();
        /* Set text size, color etc. as needed */
        paint.setTextSize(36);

        int width = (int)paint.measureText(text);
        int height = (int)paint.getTextSize();

        paint.setTextAlign(Paint.Align.CENTER);
        // Create a transparent bitmap as big as you need
        Bitmap image = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(image);
        // During development the following helps to see the full
        // drawing area:
        canvas.drawColor(0x50A0A0A0);
        // Start drawing into the canvas
        canvas.translate(width / 2f, height);
        canvas.drawText(text, 0, 0, paint);
        BitmapDescriptor icon = BitmapDescriptorFactory.fromBitmap(image);
        return icon;
    }
}

まず、

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
        // Add a marker in Sydney and move the camera
        LatLng sydney = new LatLng(-34, 151);
        mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney").icon(getTextMarker("Hello")));
        mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
    }

ここが、マップにマーカーを表示させる処理にあたります。

通常だと自動的に生成されているので、気にしなくても良いのですが、今回は

        mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney").icon(getTextMarker("Hello")));

この一文を追加します。

ここで特筆すべきは、iconと書かれた箇所にgetTextMarker というメソッドを呼び出しています。通常ならば、アイコンのファイルパスやIDを指定するのですが、メソッドが生成させたビットマップ画像を表示させているのです。

public BitmapDescriptor getTextMarker(String text) {

        Paint paint = new Paint();
        /* Set text size, color etc. as needed */
        paint.setTextSize(36);

        int width = (int)paint.measureText(text);
        int height = (int)paint.getTextSize();

        paint.setTextAlign(Paint.Align.CENTER);
        // Create a transparent bitmap as big as you need
        Bitmap image = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(image);
        // During development the following helps to see the full
        // drawing area:
        canvas.drawColor(0x50A0A0A0);
        // Start drawing into the canvas
        canvas.translate(width / 2f, height);
        canvas.drawText(text, 0, 0, paint);
        BitmapDescriptor icon = BitmapDescriptorFactory.fromBitmap(image);
        return icon;
    }

それのビットマップ画像を作っているメソッドの中身がこのようになります。

あとは、内部のパラメーターを弄れば、好きなテキストを好きなテキストスタイルで表示することが可能です。

タイトルとURLをコピーしました