본문 바로가기

Android/Google Maps Demo 4

MapView상의 지도위에 표현될 이미지를 그리는 예

MapView상의 지도위에 표현될 이미지를 그리는 예

프로젝트 설정은 앞글과 동일하므로 변경된 일부의 파일만 여기에 소개함

MapView 상의 지도에 텍스트, 이미지, 도형 등을 출력하려면 Overlay 클래스를 상속하여 draw()를 오버라이드할 때 Canvas에 이미지(Bitmap클래스의 인스턴스)를 그리도록 작성하면 된다. 여기서는 지도상의 특정 위치를 가리키는 적색 화살표를 지도위에 그려본다.

이미지는 JPEG, GIF, PNG등을 사용하면 되고 프로젝트의 drawable 폴더에 import해 두면 R.java 파일에 자동으로 등록되어 Activity클래스의 onCreate() 안에서 쉽게 로드할 수 있다.

사용된 화살표 이미지

(arrow.png)

MyOverlay.java

앞글의 내용과 동일하며 다른 부분은 적색으로 표시했다.

package com.ojtit.android.demo;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Point;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;

public class MyOverlay extends Overlay {
 
 private Bitmap arrow;
 
 public MyOverlay(Bitmap bitmap){
  this.arrow = bitmap;
 }

 
 @Override
 public void draw(Canvas canvas, MapView mapView, boolean shadow) {
 
  super.draw(canvas, mapView, shadow);
       
     Paint paint1 = new Paint();
     Paint paint2 = new Paint();

     paint1.setARGB(255, 255, 0, 0); // a, r, g, b
     paint2.setARGB(255, 255, 0,0);

     // 아래에서 사용된 아규먼트는 위도, 경도 정보(40.756054)에서 가운데 '.' 을 뺀 것
     GeoPoint geoPoint = new GeoPoint(37517180,127041268);
     
     Point pixPoint = new Point();
     
     mapView.getProjection().toPixels(geoPoint, pixPoint); // 지리적 위치를 화면상의 픽셀위치로 변환

     // drawCircle(float cx, float cy, float radius, Paint paint) ;
     // drawLine(float startX, float startY, float stopX, float stopY, Paint paint) ;
     // drawText(String text, float x, float y, Paint paint) ;
     //canvas.drawCircle(pixPoint.x, pixPoint.y, 10, paint1);
     //drawBitmap(Bitmap bitmap, float left, float top, Paint paint);

       
     canvas.drawBitmap(arrow, pixPoint.x-11, pixPoint.y, paint2);
     canvas.drawText("강남구청역", pixPoint.x-30, pixPoint.y + 30, paint2);   
 }
 
}


GoogleMapsActivity.java
앞글의 내용과 거의 동일하지만, 리소스로부터 화살표 이미지를 읽어서 Bitmap 인스턴스로 리턴하고 다시 MyOverlay 클래스의 생성자로 전달하여 Canvas에 화살표 이미지가 그려질 수 있도록 설정해준다

package com.ojtit.android.demo;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;

public class GoogleMapsActivity extends MapActivity
{

 @Override
 public void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  MapView mapView = (MapView) findViewById(R.id.mapview);
  mapView.setBuiltInZoomControls(true); //지도 확대/축소기능 활성화
 
  // 리소스에서 arrow.png 를 가져와서 Bitmap 인스턴스를 생성한다
  Bitmap arrow = BitmapFactory.decodeResource(this.getResources(), R.drawable.arrow);


  //아래 라인을 사용하면 지도처럼 표현하는 것이 아니라 위성에서 촬영한 항공사진이 출력됨
  //mapView.setSatellite(true);

 
  //아래의 위도, 경도 좌표는 '37.517180' 에서 숫자 사이의 '.' 을 제거한 표현임
  GeoPoint geoPoint = new GeoPoint(37517180,127041268); // 강남구청역
  MapController mc = mapView.getController();
  mc.animateTo(geoPoint);
  mc.setZoom(17);
 
  // MapView 상의 지도 위에 표현할 것들을 그린다
  mapView.getOverlays().add(new MyOverlay(arrow));
 }
 
 @Override
 protected boolean isRouteDisplayed() {
  return true;
 }
}


Run As > Android Application