widget_marker_google_map

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

Google Maps를 확장하여 개발자가 지도 위에 사용자 정의 위젯 기반 마커를 배치할 수 있도록 해주는 플러터 패키지입니다. 표준 마커와 달리 이 패키지는 아이콘, 아바타, 인터랙티브 요소 등 어떤 플러터 위젯이라도 지도 마커로 사용할 수 있게 합니다. Google Maps 플러그인과 원활하게 통합되며, Android, iOS, Web 플랫폼을 모두 지원합니다. 단순한 이미지나 텍스트를 넘어서 풍부하고 동적 또는 상호작용 가능한 마커 콘텐츠가 필요한 앱에 이상적입니다.

사용 사례

인터랙티브 지도 인터페이스
애니메이션을 사용한 사용자 정의 마커 UI
풍부한 시각적 요소를 갖춘 실시간 위치 추적
지도上的 사용자 프로필 마커
지도上的 동적 데이터 시각화

주요 기능

임의의 플러터 위젯을 마커로 지원
크로스 플랫폼 호환성 (Android, iOS, Web)
Google Maps 플러그인과의 간편한 통합
사용자 정의 가능한 마커 위치 및 동작
동적 마커 콘텐츠에 대한 실시간 업데이트

적합한 대상

인터랙티브 지도를 개발하는 개발자
브랜드화 또는 애니메이션 마커가 필요한 앱
실시간 위치 데이터를 갖춘 프로젝트
UI 중심의 위치 기반 애플리케이션
플러터를 사용하여 풀스택 지도 기능을 구현하는 팀

고려 사항

많은 복잡한 위젯 사용 시 성능 영향
동적 업데이트를 위해 적절한 상태 관리가 필요합니다
고급 마커 클러스터링에 대한 제한된 지원
대규모 지도 렌더링을 위한 최적화가 필요할 수 있습니다
Google Maps SDK 사용 가능 여부에 따라 다름

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Google map with widget markers.

Set up

Follow the steps on google_maps_flutter document.

Usage

Same as google_maps_flutter except for widgetMarkers.

 WidgetMarkerGoogleMap(
    initialCameraPosition: shibuya,
    mapType: MapType.normal,
    widgetMarkers: [
      WidgetMarker(
        position: cafePosition,
        markerId: 'cafe',
        widget: Container(
          color: Colors.brown,
          padding: const EdgeInsets.all(2),
          child: const Icon(
            Icons.coffee,
            color: Colors.white,
            size: 64,
          ),
        ),
      ),
      WidgetMarker(
        position: clothesShopPosition,
        markerId: 'clothes',
        widget: Container(
          color: Colors.green,
          padding: const EdgeInsets.all(4),
          child: const Text(
            'shop',
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontSize: 32,
            ),
          ),
        ),
      ),
      WidgetMarker(
        position: hamburgerShopPosition,
        markerId: 'hamburger',
        widget: Container(
          color: Colors.red,
          padding: const EdgeInsets.all(2),
          child: const Icon(
            Icons.fastfood,
            color: Colors.yellow,
            size: 64,
          ),
        ),
      ),
    ],
  ),

WidgetMarker

You need to insert the list of WidgetMarker to use widget markers.

Make sure that you still need to use onTap method when you use gestures.

class WidgetMarker {
  WidgetMarker({
    required this.position,
    required this.markerId,
    required this.widget,
    this.onTap,
  }) : assert(markerId.isNotEmpty);

  final LatLng position;

  /// Keep this unique, otherwise it will not appear.
  final String markerId;

  /// Gestures of widget is disabled.
  /// Use this callback instead.
  final VoidCallback? onTap;

  final Widget widget;
}

If you have any requests or questions, feel free to ask on github.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_Devin
💻

_{Santa Takahashi}
💻

This project follows the all-contributors specification. Contributions of any kind welcome!

패키지, 저장소 및 앱 카테고리 검색