본문 바로가기

About Programing/05. Android

Overlay를 사용하여 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;
 }
}