Nextbillion 地图 Flutter

简介

WechatIMG435

先决条件

  • 访问密钥
  • Android minSdkVersion 16+
  • iOS 11+
  • Flutter 3.10+
  • Pod 1.11.3+

安装

依赖

将以下依赖项添加到您的 project pubspec.yaml 文件中，以使用 NB Maps Flutter Plugin，将依赖项添加到 pubspec.yaml

dependencies:
  nb_maps_flutter: version

导入

在您的代码中导入地图插件

import 'package:nb_maps_flutter/nb_maps_flutter.dart';

初始化

要运行 Maps Flutter Plugin，您需要在 Flutter 应用程序的开头使用 NextBillion.initNextBillion(YOUR_ACCESS_KEY) 配置 NB Maps Token。

 class _MapsDemoState extends State<MapsDemo> {
  @override
  void initState() {
    super.initState();
    NextBillion.initNextBillion(YOUR_ACCESS_KEY);
  }
}

NBMap Widget

创建一个带有初始相机位置的 NBMap Widget

NBMap(
      onMapCreated: onMapCreated,
      initialCameraPosition: const CameraPosition(
           target: LatLng(0.0, 0.0),
           zoom: 11.0,
  ),
)

位置组件

配置权限

您需要授予位置权限才能使用 NB Maps Flutter Plugin 的位置组件，请为两个平台声明权限

Android

将以下权限添加到 manifest 中

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

iOS

将以下内容添加到 Runner/Info.plist 中，以解释为什么您需要访问位置数据

 <key>NSLocationWhenInUseUsageDescription</key>
    <string>[Your explanation here]</string>

启用位置跟踪

  • trackCameraPosition: true
  • myLocationEnabled: true
  • myLocationTrackingMode: MyLocationTrackingMode.Tracking

观察用户位置更新

  • 添加回调 onUserLocationUpdated(UserLocation location)

NBMap(
     onMapCreated: _onMapCreated,
     initialCameraPosition: const CameraPosition(
            target: LatLng(0, 0),
            zoom: 14.0,
          ),
     trackCameraPosition: true,
     myLocationEnabled: true,
     myLocationTrackingMode: MyLocationTrackingMode.Tracking,
     onUserLocationUpdated: (userLocation) {},
)

注解

要操作 mapview，您需要在 onMapReady(NextbillionMapController controller) 回调 中获取 map controller。

符号标注

符号标注将一个符号添加到地图上。它由指定的自定义 SymbolOptions 配置。如果您需要添加一个图像符号，则需要将图像源添加到地图样式中。

添加图像源

final ByteData bytes = await rootBundle.load("assets/image.png");
final Uint8List list = bytes.buffer.asUint8List();
await controller?.addImage("ic_marker", list);


var symbol = controller.addSymbol(
      SymbolOptions(
          geometry: LatLng(-33.894372606072309, 151.17576679759523),
          iconImage: "ic_marker",
          iconSize: 2),
    );

//remove annotation
controller!.removeSymbol(symbol);

//update annotation
controller!.updateSymbol(symbol, updatedOptions)

线标注

线标注将一条线添加到地图上。它由指定的自定义 LineOptions 配置。

var line = controller.addLine(
      LineOptions(
        geometry: [
          LatLng(-33.874867744475786, 151.170627211986584),
          LatLng(-33.881979408447314, 151.171361438502117),
          LatLng(-33.887058805548882, 151.175032571079726),
        ],
        lineColor: "#0000FF",
        lineWidth: 20,
      ),
    );

//remove annotation
controller!.removeLine(line);

//update annotation
controller!.updateLine(line, updatedOptions)

填充标注

填充标注将一个填充添加到地图上。它使用指定的自定义 FillOptions 配置。

var fill = controller!.addFill(
      FillOptions(
        geometry: [
          [
            LatLng(-33.901517742631846, 151.178099204457737),
            LatLng(-33.872845324482071, 151.179025547977773),
            LatLng(-33.868230472039514, 151.147000529140399),
            LatLng(-33.883172899638311, 151.150838238009328),
            LatLng(-33.901517742631846, 151.178099204457737),
          ],
        ],
        fillColor: "#FF0000",
        fillOutlineColor: "#000000",
      ),
    )

//remove annotation
controller!.removeFill(fill);

//update annotation
controller!.updateFill(fill, updatedOptions)

圆形标注

圆形标注将一个圆添加到地图上。它使用指定的自定义 CircleOptions 配置。

var addCircle = controller!.addCircle(
      CircleOptions(
        geometry: LatLng(-33.894372606072309, 151.17576679759523),
        circleStrokeColor: "#00FF00",
        circleStrokeWidth: 2,
        circleRadius: 30,
      ),
    );

标注 onTap 回调

以下代码片段显示了如何添加回调以接收点击事件，以及如何在地图上放置标注，以及如何在 dispose() 函数中移除这些回调。

void _onMapCreated(NextbillionMapController controller) {
    this.controller = controller;
    controller.onFillTapped.add(_onFillTapped);
    controller.onCircleTapped.add(_onCircleTapped);
    controller.onLineTapped.add(_onLineTapped);
    controller.onSymbolTapped.add(_onSymbolTapped);
  }

 @override
  void dispose() {
    controller.onFillTapped.remove(_onFillTapped);
    controller.onCircleTapped.remove(_onCircleTapped);
    controller.onLineTapped.remove(_onLineTapped);
    controller.onSymbolTapped.remove(_onSymbolTapped);
    super.dispose();
  }

相机

定义相机移动，支持绝对移动以及相对于指定位置的移动。

CameraUpdate

相机更新会将相机移动到指定的 CameraPosition，包括相机的 [target] 地理位置、[zoom] 级别、[tilt] 角度和 [bearing]。

CameraUpdate.newCameraPosition(
       const CameraPosition(
              bearing: 270.0,
              target: LatLng(51.5160895, -0.1294527),
              tilt: 30.0,
              zoom: 17.0,
        ),
 )
controller.animateCamera(cameraUpdate)

以下代码片段显示了如何将相机目标移动到指定的地理位置。

CameraUpdate.newLatLng(const LatLng(56.1725505, 10.1850512))

移动相机

animateCamera() 函数启动相机位置的动画更改

controller.animateCamera(cameraUpdate, duration)

moveCamera() 函数将快速移动相机，这可能会让用户感到不适。在实际使用中，我们应该强烈考虑使用 animateCamera() 方法而不是 moveCamera()，因为它不那么突兀。

controller.moveCamera(cameraUpdate)

更多

  • scrollBy()
  • zoomBy()
  • zoomIn()
  • zoomOut()
  • zoomTo(double zoom)
  • bearingTo(double bearing)
  • tiltTo(double tilt)

GitHub

查看 Github