Flutter (플러터) - 구글지도 사용 - (3) 마커, 반경 생성

전편을 보고오지 않았다면

먼저 보고 오시기를 권장 드립니다.

 

 

1편 : https://want-all.tistory.com/3 

2편 : https://want-all.tistory.com/4?category=1160465

Flutter (플러터) - 구글지도 사용 - (1) 환경세팅

 

 

1 ) 마커 생성

- 사실 마커 자체는 코드도 , 다른것도 별거 없다.

 

아래가 전부다.

var marker = Marker(
        markerId: MarkerId(e['name'] as String),
        infoWindow: InfoWindow(title: e['name'] as String),
        position: LatLng(
          e['latitude'] as double,
          e['longitude'] as double,
        ),
      ),
      
      
  Mymarkers.add(marker) //<< 로 Mymarkers 란 곳에 넣어주고

 

위 마커를

Mymarkers.add  << 로 Mymarkers 란 곳에 넣어주고

 

2편 에서 나와있던 지도 옵션중

marker : 라는 옵션에 Mymarkers 를 넣어주면 끝이다.

 

 

여기서

markerId : 마커를 가르키는 "고유 값" 이기에 "절대로" 겹치면 안되며, 필수 값 이다.

infoWindow : 마커를 누르면 뜨는 정보창

position : 마커의 위치를 정해주는 옵션으로 "필수 값"이다.

 

 

 

2 ) 영역, 반경 생성

 

영역은 보통 핀을 중심으로 그려진다.

 

//* 구글 지도 핀 영역 만들기
  Future<void> makeGooglePin(Model data) async {

    
      regionsRadius.add(
        Circle(
          circleId: CircleId(data.cid),
          center: LatLng(
            data.location.lat.toDouble(),
            data.location.lon.toDouble(),
          ),
          radius: data.radius.toDouble(),
          fillColor: const Color(0xFF5991FF).withOpacity(0.1),
          strokeColor: const Color(0xff5991FF).withOpacity(0.5),
          strokeWidth: 1,
        ),
      ),
      regionsMarkers.add(
        Marker(
          markerId: MarkerId(data.cid),
          position: LatLng(
            data.location.lat.toDouble(),
            data.location.lon.toDouble(),
          ),
        ),
      ),
   
  }

 

 

위의 예시에서는

마커와 반경을 같이 만들어 주었지만,

 

반경에 대해서만 설명하면 될 것 같아 

아래에 설명 하겠다.

 

요소

- circleId : 고유 값 , 겹치면 안 됨

- center : 반경의 중심 위치 

- radius : 반경 반지름

- fillColor : 반경을 채우는 색상

- strokeColor : 반경 경계 색상

- strokeWidth : 반경 경계 선 굵기

 

 

정도로 어렵지 않다.

 

 

 

여기까지,

 

마커와 반경의 생성에 대하여

포스팅 하였습니다.

 

 

 

 

도움이 되셨다면

댓글과 좋아요 부탁드립니다.