Flutter地图展示插件naver_map_plugin的使用

naver_map_plugin 是一个可以在 Flutter 项目中展示 Naver 地图的插件，支持 Android 和 iOS 平台。

安装

该插件通过 Naver Cloud Platform 提供的地图服务在 Android 和 iOS 环境中展示地图。

注册应用

1. 在 Naver Cloud Platform 的 AI·Application Service > AI·NAVER API > Application 中注册您的应用程序。
2. 选择已注册的应用程序并确认其 Client ID 是否正确，并确保 Maps 功能已被启用。

添加依赖

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  naver_map_plugin: ^0.9.6

然后运行 flutter pub get 来安装依赖。

警告

• 地图上的一些默认控制器可能无法正常工作（具体原因尚未查明）。
• 在 Android 上，仅“当前位置”按钮可以正常工作。

注意事项 (Android)

韩文说明

Naver 地图 SDK 默认使用 GLSurfaceView 来渲染地图。在热重载时，由于 Naver 地图 SDK 的二进制文件存在未知问题，可能会导致应用程序崩溃。因此，在发布版本中会使用性能更好的 GLSurfaceView，而在开发模式下则使用支持热重载的 TextureView。

英文说明

NaverMap SDK 使用 GLSurfaceView 作为默认渲染器来刷新 Android 地图视图。在热重载时，由于 Naver 地图 SDK 的二进制文件存在未知问题，应用程序可能会崩溃。如果构建的是发布版本，则此插件将使用性能更高的 GLSurfaceView；否则，它会使用支持热重载的 TextureView。

Android 开始指南

AndroidManifest.xml 配置

在 AndroidManifest.xml 文件中添加以下内容：

<manifest>
    <application>
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="YOUR_CLIENT_ID_HERE" />
    </application>
</manifest>

请求位置权限

为了使用 Naver 地图的当前位置搜索功能，在 AndroidManifest.xml 文件中声明权限：

<manifest>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
</manifest>

对于 Android API Level 23 (M) 及以上版本，需要动态请求权限。以下是一个示例代码：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    if (checkSelfPermission(Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
        requestPermissions(new String[]{Manifest.permission.ACCESS_FINE_LOCATION}, 0);
    }
}

iOS 开始指南

iOS 开始指南

安装 Git LFS

首先需要安装 Git Large File Storage (LFS)，可以通过以下命令安装：

brew install git-lfs

然后配置 Git LFS：

$ git lfs install

配置 Info.plist

在 Info.plist 文件中添加以下内容：

<dict>
  <key>NMFClientId</key>
  <string>YOUR_CLIENT_ID_HERE</string>
  <key>io.flutter.embedded_views_preview</key>
  <true/>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

请求位置权限

为了使用 Naver 地图的当前位置搜索功能，在 Info.plist 文件中声明权限：

<dict>
    <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
    <string>[USAGE PERPOSE]</string>
    <key>NSLocationAlwaysUsageDescription</key>
    <string>[USAGE PERPOSE]</string>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>[USAGE PERPOSE]</string>
</dict>

获取位置权限

在 AppDelegate.swift 文件中获取位置权限：

if (CLLocationManager.locationServicesEnabled()) {
    switch CLLocationManager.authorizationStatus() {
    case .denied, .notDetermined, .restricted:
        self.manager.requestAlwaysAuthorization()
        break
    default:
        break
    }
}  

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 中使用 naver_map_plugin 插件：

import 'package:flutter/material.dart';

import 'package:naver_map_plugin_example/base_map.dart';
import 'package:naver_map_plugin_example/circle_map.dart';
import 'package:naver_map_plugin_example/padding_test.dart';
import 'package:naver_map_plugin_example/marker_map_page.dart';
import 'package:naver_map_plugin_example/path_map.dart';
import 'package:naver_map_plugin_example/polygon_map.dart';
import 'package:naver_map_plugin_example/text_field_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  [@override](/user/override)
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  List<String> menuText = [
    '基础地图示例',
    '标记示例',
    '路径示例',
    '圆形覆盖层示例',
    '控制器测试',
    '多边形示例',
    'GLSurface线程冲突测试',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: menuText
              .map((text) => GestureDetector(
                    onTap: () => _onTapMenuItem(text),
                    child: Container(
                      margin: EdgeInsets.symmetric(vertical: 8),
                      padding: EdgeInsets.all(16),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(6),
                        border: Border.all(color: Colors.indigo),
                      ),
                      child: Text(
                        text,
                        style: TextStyle(
                          color: Colors.indigo,
                          fontSize: 12,
                          fontWeight: FontWeight.w600,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ))
              .toList(),
        ),
      ),
    );
  }

  _onTapMenuItem(String text) {
    final index = menuText.indexOf(text);
    switch (index) {
      case 0:
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => BaseMapPage(),
            ));
        break;
      case 1:
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => MarkerMapPage(),
            ));
        break;
      case 2:
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => PathMapPage(),
            ));
        break;
      case 3:
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => CircleMapPage(),
            ));
        break;
      case 4:
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => PaddingTest(),
            ));
        break;
      case 5:
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (_) => PolygonMap(),
            ));
        break;
      case 6:
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) => TextFieldPage(),
          ));
    }
  }
}