kakao_map_plugin 0.0.1

This is a Kakao map Flutter plugin project.

kakao_map_plugin

카카오 지도 를 구동할 수 있는 Flutter 플러그인 입니다.

네이티브 라이브러리를 사용한 것이 아닌 Javascript 라이브러리를 이용하여 제작한 플러그인 입니다.

webview_flutter package 를 사용하고 있어서 Android, iOS 최소 버전 확인이 필요합니다.

	Android	iOS
Support	SDK 19+ or 20+	9.0+

---

시작하기

공통

카카오 개발자센터 에서 javascript key 를 발급받아야 합니다.

pubspec.yaml에 dependencies에 작성

dependencies:
  kakao_map_plugin: [최신버전]

1. javascript key 등록

void main() {

  AuthRepository.initialize(appKey: 'javascript key');
}

Android

AndroidManifest.xml 에 INTERNET 권한 및 usesCleartextTraffic="true" 설정

<manifest>
    <!-- webview_flutter 에서 인터넷 접속을 위한 권한을 선언합니다 -->
    <uses-permission android:name="android.permission.INTERNET" />

    <application
    android:usesCleartextTraffic="true">
        ...
    </application>
</manifest>

iOS

Info.plist 에 NSAppTransportSecurity 권한 및 io.flutter.embedded_views_preview 설정

<dict>
	<key>NSAppTransportSecurity</key>
      <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSAllowsArbitraryLoadsInWebContent</key>
        <true/>
      </dict>
    <key>io.flutter.embedded_views_preview</key>
    <true/>
</dict>

---

예제

Kakao maps api 사이트에 있는 예제를 기준으로 샘플을 만들었습니다.

• 기본 지도 생성

  Scaffold(
    body: KakaoMap(),
  );
  

• 맵 생성 callback

  Scaffold(
    body: KakaoMap(
      onMapCreated: ((controller) {
        mapController = controller;
      }),
  
    ),
  );
  

• 마커 생성 - 지도가 생성되면 마커 추가되는 예제

  Set<Marker> markers = {}; // 마커 변수
  
  Scaffold(
    body: KakaoMap(
      onMapCreated: ((controller) async {
        mapController = controller;
  
        markers.add(Marker(
          markerId: UniqueKey().toString(),
          latLng: await mapController.getCenter(),
        ));
  
        setState(() { });
      }),
      markers: markers.toList(),
      center: LatLng(37.3608681, 126.9306506),
    ),
  );
  

• Circle, Polyline, Polygon 예제

  Set<Circle> circles = {};
  Set<Polyline> polylines = {};
  Set<Polygon> polygons = {};
  
  Scaffold(
    appBar: AppBar(
      title: Text(widget.title ?? selectedTitle),
    ),
    body: KakaoMap(
      onMapCreated: ((controller) async {
        mapController = controller;
  
        circles.add(
          Circle(
            circleId: circles.length.toString(),
            center: LatLng(33.450701, 126.570667),
            strokeWidth: 5,
            strokeColor: Colors.red,
            strokeOpacity: 0.5,
            strokeStyle: StrokeStyle.longDashDotDot,
            fillColor: Colors.black,
            fillOpacity: 0.7,
            radius: 50,
          ),
        );
  
        polylines.add(
          Polyline(
            polylineId: 'polyline_${polylines.length}',
            points: [
              LatLng(33.452344169439975, 126.56878163224233),
              LatLng(33.452739313807456, 126.5709308145358),
              LatLng(33.45178067090639, 126.5726886938753)
            ],
            strokeColor: Colors.purple,
          ),
        );
  
        polygons.add(
          Polygon(
            polygonId: 'polygon_${polygons.length}',
            points: [
              LatLng(33.45133510810506, 126.57159381623066),
              LatLng(33.44955812811862, 126.5713551811832),
              LatLng(33.449986291544086, 126.57263296172184),
              LatLng(33.450682513554554, 126.57321034054742),
              LatLng(33.451346760004206, 126.57235740081413)
            ],
            strokeWidth: 4,
            strokeColor: Colors.blue,
            strokeOpacity: 1,
            strokeStyle: StrokeStyle.shortDashDot,
            fillColor: Colors.black,
            fillOpacity: 0.3,
          ),
        );
  
        setState(() {});
      }),
      circles: circles.toList(),
      polylines: polylines.toList(),
      polygons: polygons.toList(),
      center: LatLng(33.450701, 126.570667),
    ),
  );