Flutter, 플러터
Flutter(플러터) 구글 맵 사용 해서 위젯 만들기
Rhats
2023. 3. 8. 18:51
반응형
Flutter(플러터) 구글 맵 사용 해서 위젯 만들기
1. google_maps_flutter_web 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일에 아래 코드를 추가합니다. 또는 flutter pub add google_maps_flutter_web
dependencies:
google_maps_flutter_web: ^0.2.0
2.google_maps_flutter_web 패키지에서 제공하는 GoogleMap 위젯을 사용하여 지도를 표시합니다.
import 'package:flutter/material.dart';
import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';
class MapWidget extends StatefulWidget {
@override
_MapWidgetState createState() => _MapWidgetState();
}
class _MapWidgetState extends State<MapWidget> {
GoogleMapController? _controller;
@override
Widget build(BuildContext context) {
return GoogleMap(
onMapCreated: (controller) {
_controller = controller;
},
initialCameraPosition: CameraPosition(
target: LatLng(31.5555, 111.3333), // 초기 지도 위치
zoom: 15.0, // 초기 줌 레벨
),
myLocationEnabled: true, // 현재 위치 보기 활성화
markers: _buildMarkers(), // 마커 추가
);
}
Set<Marker> _buildMarkers() {
// 현재 위치에 마커 추가
return {
Marker(
markerId: MarkerId('current_location'),
position: LatLng(31.5555, 111.3333), // 현재 위치 (임시 값)
infoWindow: InfoWindow(title: '현재 위치'),
),
};
}
}
위 코드에서는 GoogleMap 위젯을 사용하여 지도를 표시하고, myLocationEnabled 속성을 true로 설정하여 현재 위치 보기를 활성화합니다. 또한 _buildMarkers() 함수에서 현재 위치에 마커를 추가합니다. 이 코드에서는 임시 값으로 LatLng(37.5665, 126.9780)을 사용하였습니다.
이제, MapWidget 위젯을 다른 화면에서 사용할 수 있습니다.
import 'package:flutter/material.dart';
import 'map_widget.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Google Maps Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Google Maps Demo'),
),
body: MapWidget(),
),
);
}
}
위 코드에서는 MapWidget을 Scaffold 위젯의 body 속성으로 사용합니다. 이제 앱을 실행하면, 현재 위치를 보여주는 지도가 표시됩니다.
반응형