## 사이드 프로젝트로 동네에 있는 가로쓰레기통의 위치를 보여주는 프로젝트를 진행중인데 웹 사이트를 접속하든 앱을 접속하든 결국 본인의 위치를 기준으로 근처에 있는 가로쓰레기통을 알려주어야 하는데 이를 구현하면서 겪었던 부분을 정리했다
## Geolocation.getCurrentPosition()
MDN Web Docs에 따르면 해당 메서드는 사용자의 현재 위치를 얻을 수 있다고 한다.
//developer.mozilla.org/ko/docs/Web/API/Geolocation/getCurrentPosition
Geolocation.getCurrentPosition() - Web API | MDN
Geolocation.getCurrentPosition() 메서드는 장치의 현재 위치를 가져옵니다.
developer.mozilla.org
MDN에 등록 된 예제
var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }; function success(pos) { var crd = pos.coords; console.log('Your current position is:'); console.log('Latitude : ' + crd.latitude); console.log('Longitude: ' + crd.longitude); console.log('More or less ' + crd.accuracy + ' meters.'); }; function error(err) { console.warn('ERROR(' + err.code + '): ' + err.message); }; navigator.geolocation.getCurrentPosition(success, error, options);해당 메서드를 활용하면 웹 페이지에 접속한 사용자가 현재 사용중인 클라이언트 장치를 통해서 위치정보제공을 허용하는 경우 위치좌표를 던져주는 기능을 해준다.
지도를 보여줄때 center라는 옵션에 본인이 위치한 위도와 경도를 넣어주면 해당 위치를 기준으로 지도를 보여준다.
그래서 나는 간단하게 생각하고 맵을 만들기 전에 getCurrentPosition 함수를 활용해 사용자의 위치를 매개변수로 넣어주는 로직을 작성했다.
하지만 문제가 발생했다. getCurrentPostion를 활용해 위치를 가져오는 메서드의 결과값이 1초 이상이 걸리는 이슈였다. 그러다보니 자연스럽게 내가 point라는 변수를 넣어줘도 해당 값은 undefined 였고 에러가 발생했다.
## 해결방안 ##
문제를 해결하고자 getCurrentPostion 함수에 Promise를 활용해서 동기식 처리를 하기로 했다.
해당 로직으로 변경 후 지도에서는 내가 현재 위치한 영등포의 지도를 보여주는것을 확인했다. 로딩이 길어지면 로딩바나 다른 요소를 넣어서 사용자로 하여금 기다리는 시간이 지루하고 길게 느껴지지 않도록 처리하는 과정이 필요해 보인다.
* 현업을 할때 Promise를 많이 활용하지 않았는데 리뉴얼 프로젝트를 담당했던 파트장님이 걸프를 같이 도입해서 es6문법도 사용이 가능해졌는데 실무에서도 적극적으로 활용해야겠다.
[네이버 지도 API] 마커 / 현재위치 표시하기
지난 포스팅에 이어 네이버 지도에 마커와 현재위치를 표시해 보도록 하겠습니다.
아직 네이버 지도 사용을 위한 준비가 되지 않았다면 아래 포스팅을 참고해 주세요.
[네이버 지도 API] 시작하기(Client ID 발급, 앱에 지도 띄우기)
[네이버 지도 API] 시작하기(Client ID 발급, 앱에 지도 띄우기)
[네이버 지도 API] 시작하기(Client ID 발급, 앱에 지도 띄우기) 네이버 지도를 사용하기 위해서는 네이버 클라우드 플랫폼 가입 후 Client ID를 발급받아야 합니다. 이번 포스팅에서는 네이버 클라우드 플랫폼 가..
wooastudio.tistory.com
오늘 포스팅의 내용은 아래와 같습니다.
▼ 목 차 ▼
□ 마커 표시하기
□ 현재위치 표시하기
□ 전체 코드
마커 표시하기
xml에 정의하였던 MapFragment 객체를 받아옵니다. 그리고 getMapAsync() 함수를 호출합니다. Map이 준비가 완료되면 onMapReady() 콜백 메서드가 비동기적으로 호출됩니다. onMapReady()가 호출된 후에 지도를 정상적으로 사용할 수 있습니다.
1. OnMapReadyCallback을 구현하기 위해 선언합니다.
public class MainActivity extends AppCompatActivity implements OnMapReadyCallback {2. getMapAsync()에 this를 넣어줘서 onMapReady()가 호출될 수 있게 합니다.
// 지도 객체 생성 FragmentManager fm = getSupportFragmentManager(); MapFragment mapFragment = (MapFragment)fm.findFragmentById(R.id.map); if (mapFragment == null) { mapFragment = MapFragment.newInstance(); fm.beginTransaction().add(R.id.map, mapFragment).commit(); } // getMapAsync를 호출하여 비동기로 onMapReady 콜백 메서드 호출 // onMapReady에서 NaverMap 객체를 받음 mapFragment.getMapAsync(this);3. onMapReady()가 호출되면 지도상에 마커를 표시합니다.
현재위치 표시하기
현재위치를 받기 위해서는 위치정보 사용을 위한 권한이 필요합니다. 그리고 구글에서 제공하는 FusedLocationSource를 이용해서 위치를 받아옵니다.
1. AndroidManifest.xml에 위치정보 사용을 위해 권한을 추가합니다.
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />2. FusedLocationSource를 사용하기 위해 앱 모듈의 build.gradle에 play-services-location 라이브러리를 추가합니다.
implementation 'com.google.android.gms:play-services-location:17.0.0'3. MainActivity에서 FusedLocationSource를 생성합니다.
mLocationSource = new FusedLocationSource(this, PERMISSION_REQUEST_CODE);4. onMapReady() 함수 내에서 NaverMap 객체를 받아서 위치소스를 지정합니다. 그리고 위치정보 사용을 위해서 권한이 정상적으로 있는지 확인합니다.
// NaverMap 객체 받아서 NaverMap 객체에 위치 소스 지정 mNaverMap = naverMap; mNaverMap.setLocationSource(mLocationSource); // 권한확인. 결과는 onRequestPermissionsResult 콜백 매서드 호출 ActivityCompat.requestPermissions(this, PERMISSIONS, PERMISSION_REQUEST_CODE);5. 권한 확인의 결과는 onRequestPermissionsResult() 에서 받을 수 있습니다. 권한이 정상적으로 부여가 되었다면 현재위치를 표시합니다.
setLocationTrackingMode() 함수를 이용해서 위치 추적 모드를 변경할 수 있습니다.
(None, NoFollow, Follow, Face)
@Override public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) { super.onRequestPermissionsResult(requestCode, permissions, grantResults); // request code와 권한획득 여부 확인 if (requestCode == PERMISSION_REQUEST_CODE) { if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) { mNaverMap.setLocationTrackingMode(LocationTrackingMode.Follow); } } }전체 코드
MainActivity 전체 코드는 아래와 같습니다.
public class MainActivity extends AppCompatActivity implements OnMapReadyCallback { private static final String TAG = "MainActivity"; private static final int PERMISSION_REQUEST_CODE = 100; private static final String[] PERMISSIONS = { Manifest.permission.ACCESS_FINE_LOCATION, Manifest.permission.ACCESS_COARSE_LOCATION }; private FusedLocationSource mLocationSource; private NaverMap mNaverMap; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 지도 객체 생성 FragmentManager fm = getSupportFragmentManager(); MapFragment mapFragment = (MapFragment)fm.findFragmentById(R.id.map); if (mapFragment == null) { mapFragment = MapFragment.newInstance(); fm.beginTransaction().add(R.id.map, mapFragment).commit(); } // getMapAsync를 호출하여 비동기로 onMapReady 콜백 메서드 호출 // onMapReady에서 NaverMap 객체를 받음 mapFragment.getMapAsync(this); // 위치를 반환하는 구현체인 FusedLocationSource 생성 mLocationSource = new FusedLocationSource(this, PERMISSION_REQUEST_CODE); } @Override public void onMapReady(@NonNull NaverMap naverMap) { Log.d( TAG, "onMapReady"); // 지도상에 마커 표시 Marker marker = new Marker(); marker.setPosition(new LatLng(37.5670135, 126.9783740)); marker.setMap(naverMap); // NaverMap 객체 받아서 NaverMap 객체에 위치 소스 지정 mNaverMap = naverMap; mNaverMap.setLocationSource(mLocationSource); // 권한확인. 결과는 onRequestPermissionsResult 콜백 매서드 호출 ActivityCompat.requestPermissions(this, PERMISSIONS, PERMISSION_REQUEST_CODE); } @Override public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) { super.onRequestPermissionsResult(requestCode, permissions, grantResults); // request code와 권한획득 여부 확인 if (requestCode == PERMISSION_REQUEST_CODE) { if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) { mNaverMap.setLocationTrackingMode(LocationTrackingMode.Follow); } } } }이상으로 네이버 지도에 마커와 현재위치를 표시하는 방법을 알아보았습니다.
읽어주셔서 감사합니다.