Flutter 지도 - kakao_map_plugin

Published in

조현철의 개발로그

6 min readDec 23, 2022

지난 번 포스팅에서 Flutter 에 카카오지도를 구현하는 방법에 대해 작성했었습니다. 네이티브 라이브러리를 사용하는 방법은 아니고, WebView 를 이용하여 구현 하는 방법이었습니다. 혹시 못 보신 분들은 아래 링크에서 확인해 보시면 됩니다!

Flutter 지도 - 카카오지도 키 발급 및 프로젝트 설정, 그리기 API 구현하기

Flutter 에서 구글지도와 네이버지도 연동하는 방법에 대해서 작성했습니다. 이어서 이번에는 카카오지도를 연동하는 방법에 대해서 공유하려고 합니다. 혹시 구글지도, 네이버지도 연동관련해서 못 보신 분들은 아래…

medium.com

지난 번 포스팅을 작성하면서 카카오 지도를 구현할 수 있는 적절한 라이브러리가 없는 것 같아서 직접 만들어서 배포하면 좋겠다고 생각이 들었습니다! 그래서~ 여러 우여곡절 끝에… 라이브러리를 배포하게 되었습니다~! 아래 링크에서 확인해보실 수 있습니다! 라이브러리가 좋다고 생각되시면 pub.dev 좋아요도 한번씩 눌러주시면 감사하겠습니다! 😁

kakao_map_plugin | Flutter Package

This is a Kakao map Flutter plugin project.

pub.dev

오늘은 라이브러리를 만들면서 지난 번 글에 대한 추가 설명과 샘플에 대해 간단하게 설명을좀 하려고 합니다.

1. WebView 라이브러리

지난 번에는 webview_flutter, flutter_inappwebview 두개의 라이브러리를 이용해서 구현했었습니다. 그 이유는 카카오지도를 로드할 수 있는 html, js 파일을 별도로 만들어서 개발하고 싶다보니 flutter_inappwebview 라이브러리를 이용해서 local server 를 띄우고, webview_flutter 에서는 http://localhost:8080/kakaomap.html url 로 접속하여 지도를 로드하도록 하는 방식을 사용했었습니다.

그런데 kakao_map_plugin 을 만들때는 webview_flutter 라이브러리 하나만 이용하여 구현했습니다.

WebView(
  initialUrl: _loadMap(), // html 파일을 string 으로 불러오도록
  onWebViewCreated: (WebViewController webViewController) {
    _mapController = KakaoMapController(webViewController);
  },
  javascriptMode: JavascriptMode.unrestricted,
  javascriptChannels: _channels,
  debuggingEnabled: true,
  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
    Factory(() => EagerGestureRecognizer()),
  },
);


loadMap() {
    return Uri.dataFromString('''<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <script type="text/javascript"
          src='https://dapi.kakao.com/v2/maps/sdk.js?autoload=true&appkey=${AuthRepository.instance.appKey}&libraries=services,clusterer,drawing'></script>
</head>
<body style="margin: 0;">
<div id="map" style="width: 100vw; height: 100vh;"></div>
<script>
... // 지도의 javascript 구현부
</script>
</body>
</html>
''', mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString();
  }