10. 내위치로 이동 및 마커기능 수정

소요시간

2025년 2월 6일 - 5시간

 

느낀 점 , 실패지점

 

일단 네이버지도를 이용하는데 기존 문서에서 제공하는 플러그인이 아니라서 

직접 네이버지도를 하나하나 참고해야 되는 점에서 상당히 스트레스를 받는다.

ai를 최소한으로 사용해야되거나 ai를 학습시켜야 되는 게 너무 힘들었다.

그래서 짜놓은 계획이 틀어져서 5시간 밖에 집중이 안되었다. 오늘은 일단 실패했으니 내일은 성공할 거다.

 

마커 누르면 사이즈가 달라지고 이미지가 달라지게 만드는 걸 실패하였다.

( 기존 디비에서 불러오는 거랑 , 네이버지도 메서드들, json파일들이 결합되어서 코드가 엉망이 되었다. ) 

 

내일은

 

0. 리팩토링

1. 마커를 누르면 정보가 뜨고

2. 마커마다 눌려졌는지 판단해서 사이즈도 커지게 만들고 이미지도 달라지게 만들어야겠다.

3. 상세화면 ui 제작

 

 내위치 찾기

 

 

위치 서비스를 허용하면 현재 위치를 위도 경도로 받아와서 

위치로 이동하기 코드 입니다.

Future<void> _moveToCurrentLocation() async {
  if (_mapController == null) {
    print("MapController가 아직 설정되지 않음!");
    return;
  }

  // 위치 권한 확인 및 요청
  bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
  if (!serviceEnabled) {
    print("위치 서비스가 비활성화되어 있음.");
    return;
  }

  LocationPermission permission = await Geolocator.checkPermission();
  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
    if (permission == LocationPermission.deniedForever) {
      print("위치 권한이 영구적으로 거부되었습니다.");
      return;
    }
  }

  // 현재 위치 가져오기
  try {
    Position position = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high,
    );

    // 지도 카메라를 현재 위치로 이동
    final cameraUpdate = NCameraUpdate.scrollAndZoomTo(
      target: NLatLng(position.latitude, position.longitude),
      zoom: 15, // 적절한 줌 레벨
    );
    await _mapController!.updateCamera(cameraUpdate);
    print("현재 위치로 이동 완료: ${position.latitude}, ${position.longitude}");
  } catch (e) {
    print("위치 정보를 가져오는 중 오류 발생: $e");
  }
}

 

 

또한 처음부터 마커가 업데이트 되어있는게 아니라

사용자의 위치기반 , 또는 검색한 위치를 기반으로 

새로고침 버튼을 누르면 마커가 뜨게 만들었습니다.

ElevatedButton(
  onPressed: () {
    _updateMarkers(dataProvider); // 현재 지도 화면 기준으로 마커 업데이트
  },
  child: Text("새로고침"),
),

 

 

 

 

마커 설정 수정

 

 

마커의 이미지 수정과 , 사이즈를 설정 하였습니다.

final marker = NMarker(
  id: title,
  position: NLatLng(latitude, longitude),
  caption: NOverlayCaption(text: title),
  icon: NOverlayImage.fromAssetImage( 'assets/image/marker_off.png'), // 커스텀 마커 이미지
  size: const Size(40, 40),
);

 

 

결과 

내위치 기반으로 마커가 뜬다.

 

그리고 지도 중심기점으로 새로고침을 누르면 내가 보고있는 

지도중심기준 마커들이 업데이트 된다.