[flutter] 플러터에서 지도에 사용자 정의 마커 아이콘 사용하기
플러터를 사용하여 모바일 앱을 개발하는 경우, 지도에 사용자 정의 마커 아이콘을 추가하는 것은 매우 일반적입니다. 사용자 정의 마커 아이콘을 사용하면 지도 위의 위치를 시각적으로 나타낼 수 있으며, 사용자 경험을 향상시킬 수 있습니다. 이러한 기능을 구현하는 방법에 대해 알아보겠습니다.
마커 아이콘 이미지 추가하기
먼저, 앱에 표시할 사용자 정의 마커 아이콘 이미지를 추가해야 합니다. 일반적으로 PNG 형식의 이미지를 사용하며, 마커의 크기에 맞게 이미지를 조정하는 것이 좋습니다.
import 'package:flutter/material.dart';
final BitmapDescriptor customMarker =
BitmapDescriptor.fromBytes(await _getBytesFromAsset('assets/custom_marker.png'));
사용자 정의 마커 추가하기
사용자 정의 마커를 추가하려면 Google Maps Flutter 패키지를 사용해야 합니다. 다음 예제는 지도에 사용자 정의 마커를 추가하는 방법을 보여줍니다.
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
GoogleMapController mapController;
Set<Marker> markers = {};
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
setState(() {
markers.add(Marker(
markerId: MarkerId('CustomMarker'),
position: LatLng(37.7749, -122.4194),
icon: customMarker,
onTap: () {
// 마커를 클릭했을 때 실행되는 동작 추가
},
));
});
}
@override
Widget build(BuildContext context) {
return GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: LatLng(37.7749, -122.4194),
zoom: 12.0,
),
markers: markers,
);
}
이와 같은 방법으로 플러터에서 지도에 사용자 정의 마커 아이콘을 추가할 수 있습니다. 사용자 정의 마커를 통해 앱의 지도 기능을 보다 멋지게 표현할 수 있습니다.