[Flutter] Flutter에서 KakaoMap WebView API 활용하기

<분류>
A. 수단
- OS/Platform/Tool : Linux, Kubernetes(k8s), Docker, AWS
- Package Manager : node.js, yarn, brew, 
- Compiler/Transpillar : React, Nvcc, gcc/g++, Babel, Flutter
- Module Bundler  : React, Webpack, Parcel

B. 언어
- C/C++, python, Javacsript, Typescript, Go-Lang, CUDA, Dart, HTML/CSS

C. 라이브러리 및 프레임워크 및 SDK
- OpenCV, OpenCL, FastAPI, PyTorch, Tensorflow, Nsight

 

---

1. What? (현상)

카카오 API 중 지도/로컬>지도를 활용하는 방법을 알아보려고 합니다. 하기 링크로 접속하면, Android/iOS/Web 으로 구현하는 방식으로 나뉘어 있지만, 필자는 웹앱형태로 구현하기 위해 kakaomap_webview라는 flutter의 플러그인을 활용해 Web으로 구현하는 방법을 설명하고자 합니다.

https://apis.map.kakao.com/

 

카카오 API를 활용하기 위한 초기 셋팅에 대해 하기 링크를 참조하시면 좋습니다.

https://tkayyoo.tistory.com/78

---

2. Why? (원인)

• X

---

3. How? (해결책)

• pubspec.yaml

kakaomap_webview: ^0.6.2

• Android : 
  1. android/app/build.gradle (필수는 아닙니다.)
     • minSdkVersion : 21 : Android SDK가 21보다 높기 위해 이와 같이 적혀 있는지 확인만 해줍니다.
  2. android/app/src/main/AndroidManifest.xml
     • Internet permission이 필요하므로, 아래와 같이 android:usesCleartextTraffic="true"를 해줍니다.

<application
  android:label="your app name"
  android:icon="@mipmap/ic_launcher"
  android:usesCleartextTraffic="true">

• iOS :
  1. iOS 버전이 9.0보다 높아야만 합니다. 확인하려면 아래와 같은 절차를 거칩니다. (필수는 아닙니다.)
     • ios/Flutter/AppFrameworkInfo.plist : MinimumOSVersion를 확인합니다.
     • ios/Podfile :
       • platform :ios, '9.0' 라고 되어있는 것을 uncomment하고 최소 버전으로 바꿔줍니다.
       • 아래 이것이 포함되어 있는 지 확인합니다.
             post_install do |installer|
               installer.pods_project.targets.each do |target|
                 flutter_additional_ios_build_settings(target)
                 target.build_configurations.each do |config|
                   config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
                 end
               end
             end
       • flutter cache를 제거 해주고 pod install을 다시 진행해줍니다.
         flutter clean && flutter pub get
         rm ios/Podfile.lock
         cd ios && pod install
  2. ios/Runner/Info.plist 
     • 아래와 같이 권한을 추가해줍니다.

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

• 코드내 View를 아래와 같이 작성해줍니다.
  • [JavaScript 키]를 지도 API의 appkey로 사용합니다.

import 'package:kakaomap_webview/kakaomap_webview.dart';

const String kakaoMapKey = '[JavaScript 키]';

...
KakaoMapView(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height
    kakaoMapKey: kakaoMapKey,
    lat: 33.450701, 
    lng: 126.570667,
    zoomLevel: 2,
    mapType: MapType.TERRAIN,
    showMapTypeControl: false,
    showZoomControl: false,
    markerImageURL:
        'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png',
    onTapMarker: (message) {
      //event callback when the marker is tapped
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text(message.message)));
    },
    customScript: '''
      var markers = [];

      function addMarker(position) {

        var marker = new kakao.maps.Marker({position: position});

        marker.setMap(map);

        markers.push(marker);
      }

      for(var i = 0 ; i < 3 ; i++){
        addMarker(new kakao.maps.LatLng(33.450701 + 0.0003 * i, 126.570667 + 0.0003 * i));

        kakao.maps.event.addListener(markers[i], 'click', (function(i) {
          return function(){
            onTapMarker.postMessage('marker ' + i + ' is tapped');
          };
        })(i));
      }

      var zoomControl = new kakao.maps.ZoomControl();
      map.addControl(zoomControl, kakao.maps.ControlPosition.BOTTOMRIGHT);
    ''',
    overlayText: '매장 위치',
),
    
...

 

하지만 customScript를 통해 Javascript를 직접작성해 Marker를 관리하므로, Flutter로 state를 관리하기에는 직관적이지가 않습니다. 따라서 다른 방법이 있을지 다음 글에서 살펴보겠습니다.

---

https://pub.dev/packages/kakaomap_webview

https://cording-cossk3.tistory.com/208

https://pub.dev/documentation/kakaomap_webview/latest/

https://apis.map.kakao.com/web/documentation/#ControlPosition