[Android][Java] 네이버지도 API 반경표현

안녕하세요 오늘은 네이버 지도 API 의 CircleOverlay를 활용하여 반경을 표현해 보겠습니다.

CircleOverlay란?

지도에 원을 나타내는 오버레이입니다.

 

해당 CircleOverlay 클래스의 기능 명세서입니다.

https://navermaps.github.io/android-map-sdk/reference/com/naver/maps/map/overlay/CircleOverlay.html

CircleOverlay (NAVER Map Android SDK 3.17.0)

 

네이버 지도 API를 사용하는 법은 아래의 글을 읽어보세요

https://stickode.tistory.com/767

[Android][Java] 네이버 맵 API 사용하기

 

 

NaverMapStick.java 코드입니다.

public class NaverMapStick extends AppCompatActivity implements OnMapReadyCallback {

    CircleOverlay circleOverlay = new CircleOverlay(); // 지도 상 반경을 나타내는 CircleOverlay 객체 선언
    Marker marker = new Marker(); // 지도 상 마커를 나타내는 Marker 객체 선언

    private Button move_1, move_2, move_5, move_10, move_20, move_25; // 반경 조절 버튼들
    private static NaverMap naverMap; // 네이버 맵 객체
    private MapView map_fragment; // 지도 뷰 객체
    private static double location_x = 37.5519; // 초기 위도값
    private static double location_y = 126.9918; // 초기 경도값
    TextView mentoAddress; // 멘토의 위치를 표시하는 TextView
    private static int distance = 0; // 초기 반경 값
    TextView textView27; // 반경 정보를 나타내는 TextView

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_naver_map_stick);

        mentoAddress = findViewById(R.id.mentoAddress); // 멘토의 위치를 나타내는 TextView 초기화
        map_fragment = findViewById(R.id.map_fragment); // 지도 뷰 초기화
        move_1 = findViewById(R.id.move_1); // 버튼 초기화
        move_2 = findViewById(R.id.move_2); // 버튼 초기화
        move_5 = findViewById(R.id.move_5); // 버튼 초기화
        move_10 = findViewById(R.id.move_10); // 버튼 초기화
        move_20 = findViewById(R.id.move_20); // 버튼 초기화
        move_25 = findViewById(R.id.move_25); // 버튼 초기화
        textView27 = findViewById(R.id.textView27); // 반경 정보를 나타내는 TextView 초기화

        map_fragment.onCreate(savedInstanceState); // 지도 뷰의 상태를 저장 및 복원하기 위한 코드

        map_fragment.getMapAsync(this); // 비동기 방식으로 OnMapReadyCallback을 호출하여 네이버 맵 초기화

        mentoAddress.setText("Latitude : " + location_x + " , Longitude : " + location_y); // 멘토의 위치 정보 표시

        // 반경 조절 버튼에 대한 클릭 이벤트 처리
        move_1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                distance = 1000; // 반경 1km 설정
                setMoveLocation(location_x, location_y, distance);
                textView27.setText("반경 범위 : 1km");
            }
        });

        move_2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                distance = 2000; // 반경 2km 설정
                setMoveLocation(location_x, location_y, distance);
                textView27.setText("반경 범위 : 2km");
            }
        });

        move_5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                distance = 5000; // 반경 5km 설정
                setMoveLocation(location_x, location_y, distance);
                textView27.setText("반경 범위 : 5km");
            }
        });

        move_10.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                distance = 10000; // 반경 10km 설정
                setMoveLocation(location_x, location_y, distance);
                textView27.setText("반경 범위 : 10km");
            }
        });

        move_20.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView27.setText("반경 범위 : 20km");
                distance = 20000; // 반경 20km 설정
                setMoveLocation(location_x, location_y, distance);
            }
        });

        move_25.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView27.setText("반경 범위 : 25km");
                distance = 25000; // 반경 25km 설정
                setMoveLocation(location_x, location_y, distance);
            }
        });
    }

    public void setMoveLocation(double x, double y, int move) {
        CameraUpdate cameraUpdate = CameraUpdate.scrollTo(new LatLng(x, y)); // 해당 좌표로 카메라 이동
        naverMap.moveCamera(cameraUpdate);
        marker.setPosition(new LatLng(x, y)); // 마커의 위치 설정
        circleOverlay.setRadius(move); // 반경 설정
        circleOverlay.setCenter(new LatLng(x, y)); // 중심 좌표 설정
        circleOverlay.setColor(Color.argb((float) 0.3, 0, 0, 255)); // 반경 내부 색상 설정
        circleOverlay.setMap(naverMap); // 지도에 반경 표시
        marker.setMap(naverMap); // 지도에 마커 표시
    }

    @Override
    public void onMapReady(@NonNull NaverMap naverMap) {
        this.naverMap = naverMap;
        CameraPosition cameraPosition = new CameraPosition(
                new LatLng(location_x, location_y), // 초기 좌표 설정
                11 // 줌 레벨 설정
        );
        naverMap.setCameraPosition(cameraPosition); // 카메라 위치 설정

        marker.setPosition(new LatLng(location_x, location_y)); // 초기 마커 위치 설정
        setMoveLocation(location_x, location_y, distance); // 초기 반경 설정
        marker.setMap(naverMap); // 지도에 마커 표시
    }
}

 

 

activity_naver_map_stick.xml 입니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".NaverMapStick">

    <TextView
        android:id="@+id/mentoAddress"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="76dp"
        android:layout_marginEnd="16dp"
        android:text="주소 표시공간"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:fontFamily="@font/titlefont"
        android:text="Latitude, Longitude"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.054"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout9"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_marginStart="30dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mentoAddress">

        <com.naver.maps.map.MapView
            android:id="@+id/map_fragment"
            android:name="com.naver.maps.map.MapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:orientation="horizontal"
        android:weightSum="10"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView27">

        <Button
            android:id="@+id/move_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="2.5"
            android:text="1km" />

        <Button
            android:id="@+id/move_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="2.5"
            android:text="2km" />

        <Button
            android:id="@+id/move_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="2.5"
            android:text="5km" />

        <Button
            android:id="@+id/move_10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="2.5"
            android:text="10km" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout2"
        android:weightSum="10">
        <Button
            android:id="@+id/move_20"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2.5"
            android:layout_marginRight="5dp"
            android:layout_marginLeft="5dp"
            android:text="20km" />
        <Button
            android:id="@+id/move_25"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2.5"
            android:layout_marginRight="5dp"
            android:layout_marginLeft="5dp"
            android:text="25km" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="invisible"
            android:layout_marginRight="5dp"
            android:layout_marginLeft="5dp"
            android:layout_weight="2.5"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="invisible"
            android:layout_marginRight="5dp"
            android:layout_marginLeft="5dp"
            android:layout_weight="2.5">
        </Button>
    </LinearLayout>

    <TextView
        android:id="@+id/textView27"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="16dp"
        android:fontFamily="@font/subfont"
        android:text="반경 범위 : 0km"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/constraintLayout9" />


</androidx.constraintlayout.widget.ConstraintLayout>

 

 

결과 화면 입니다.