Flutter地图展示与交互插件kakaomap_webview的使用

Flutter地图展示与交互插件kakaomap_webview的使用

安装

首先，你需要获取Kakao Map的JavaScript密钥。

更多信息，请参阅： kakao map guide : https://apis.map.kakao.com/web/guide/

• Android
  • 最小SDK版本必须高于21。
  • AndroidManifest.xml文件中需要添加Internet权限，并在application标签中添加android:usesCleartextTraffic="true"。

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

• iOS
  • iOS版本必须高于9.0。
  • 在Info.plist中添加以下代码：

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

如何使用

首先，导入包

import 'package:kakaomap_webview/kakaomap_webview.dart';

你可以将其作为Widget和全屏WebView使用。

使用作为Widget

KakaoMapView(
  width: size.width,
  height: 400,
  kakaoMapKey: kakaoMapKey,
  lat: 33.450701,
  lng: 126.570667,
  showMapTypeControl: true,
  showZoomControl: true,
  markerImageURL: 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png',
  onTapMarker: (message) {
    //事件回调当标记被点击时
  });

使用全屏WebView

KakaoMapUtil util = KakaoMapUtil();
// String url = await util.getResolvedLink(
//     util.getKakaoMapURL(37.402056, 127.108212, name: 'Kakao 본사'));

/// This is short form of the above comment
String url =
    await util.getMapScreenURL(37.402056, 127.108212, name: 'Kakao 본사');

Navigator.push(
    context, MaterialPageRoute(builder: (_) => KakaoMapScreen(url: url)));

示例代码

import 'package:flutter/material.dart';
import 'package:example/kakaomap_screen.dart';

const String kakaoMapKey = 'yourKey';

class KakaoMapTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(title: Text('Kakao map webview test')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenlyy,
        children: [
          KakaoMapView(
              width: size.width,
              height: 400,
              kakaoMapKey: kakaoMapKey,
              lat: 33.450701,
              lng: 126.570667,
              showMapTypeControl: true,
              showZoomControl: true,
              markerImageURL: 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png',
              onTapMarker: (message) async {
                ScaffoldMessenger.of(context)
                    .showSnackBar(SnackBar(content: Text(message.message)));
                //await _openKakaoMapScreen(context);
              }),
          ElevatedButton(
              child: Text('Kakao map screen'),
              onPressed: () async {
                await _openKakaoMapScreen(context);
              })
        ],
      ),
    );
  }

  Future<void> _openKakaoMapScreen(BuildContext context) async {
    KakaoMapUtil util = KakaoMapUtil();

    // String url = await util.getResolvedLink(
    //     util.getKakaoMapURL(37.402056, 127.108212, name: 'Kakao 본사'));

    /// This is short form of the above comment
    String url =
        await util.getMapScreenURL(37.402056, 127.108212, name: 'Kakao 본사');

    Navigator.push(
        context, MaterialPageRoute(builder: (_) => KakaoMapScreen(url: url)));
  }
}

注意事项

• 如果你想使用KakaoMapScreen，需要处理intent和itms-app scheme URL。 请参阅示例。
• Flutter : https://github.com/devmemory/kakaomap_webview/blob/main/example/lib/kakaomap_screen.dart
• Android : https://github.com/devmemory/kakaomap_webview/tree/main/example/android/app/src/main
• 添加多边形、折线
  • strokeColor, strokeWeight, strokeColorOpacity, polygonColor, polygonColorOpacity, strokeStyle是可选的。
  • 这些功能有默认值。 只有路径是必需的，除非你想要自定义。

多个标记

• 目前仅在customScript中可以制作多个标记。
• 仍然有一个示例代码。

KakaoMapView(
    width: size.width,
    height: 400,
    kakaoMapKey: kakaoMapKey,
    lat: 33.450701,
    lng: 126.570667,
    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.RIGHT);

    var mapTypeControl = new kakao.maps.MapTypeControl();
    map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
  ''',
  onTapMarker: (message) {
    ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: Text(message.message)));
  });

覆盖层

• 自从0.2.0版本开始，你可以添加文本了。
• 简单地在KakaoMapView中添加overlayText即可。
• 不要同时使用overlayText和customOverlay。

overlayText: '카카오!'

自定义覆盖层

• 样图
  • 你可以根据Kakao指南自定义覆盖层。
  • 不要同时使用overlayText和customOverlay。