Overlay를 사용하여 MapView 상의 지도위에 그리기 예
프로젝트 설정은 여기를 참조하세요
MapView 클래스는 Google API에 포함된 외부 라이브러리이며 Google Maps에 접속하여 지도를 가져와서 화면에 그리는 기능을 한다.
MapView 클래스를 사용하기 위한 절차는 여기를 참고하면 된다.
바로 앞의 예제에서는 원하는 특정 위치를 화면의 지도상에서 중앙에 오도록 설정해 보았다.
이번 예제는 앞의 예제를 그대로 이용하여 특정 위치에 기호나 이미지를 출력하는 예제이다. 앞의 내용과 동일한 파일은 여기에 소개하지 않고 변경된 일부만 소개하기로 한다.
MyOverlay.java
새로 생성하여 추가한 클래스
MapView상에 출력된 지도의 특정 위치에 텍스트나 도형, 이미지 등을 출력하기 위해서는 Overlay 클래스를 사용해야 한다. 이 클래스를 상속하여 draw() 메소드를 오버라이드할 때 Canvas에 원하는 것을 그려주면 되는 방식이다. 지도상의 위치는 '위도/경도'로 표현되므로 화면상의 특정위치로 변환해야 하는 과정이 필요한데, 이런 경우에는 mapView.getProjection().toPixels(geoPoint, pixPoint); <-- 이렇게 변환하면 된다. 변환 결과는 pixPoint 에 저장되어 지도에 무언가를 표현하고자 할 때 위치정보로 사용하면 된다.
package com.ojtit.android.demo;
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 {
@Override
public void draw(Canvas canvas, MapView mapView, boolean shadow) {
// TODO Auto-generated method stub
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);
canvas.drawText("강남구청역", pixPoint.x-30, pixPoint.y + 30, paint2);
}
}
GoogleMapsActivity.java
MapView 상에 Overlay를 설정하면 지도위에 표현할 것들을 그릴 수 있다
package com.ojtit.android.demo;
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); //지도 확대/축소기능 활성화
//아래 라인을 사용하면 지도처럼 표현하는 것이 아니라 위성에서 촬영한 항공사진이 출력됨
//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());
}
@Override
protected boolean isRouteDisplayed() {
return true;
}
}
Run As > Android Application
위에서 작성된 프로그램을 실행하면 지도상에 적색 원과 문자열이 출력되는 것을 확인할 수 있다.
