Flutter地图功能插件nb_maps_flutter的使用

Flutter地图功能插件nb_maps_flutter的使用

安装和初始化

首先，需要在 pubspec.yaml 文件中添加依赖项：

dependencies:
  nb_maps_flutter: ^1.0.0

然后，在你的 Dart 文件中导入并初始化插件：

import 'package:nb_maps_flutter/nb_maps_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Maps Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final String ACCESS_KEY = "YOUR_ACCESS_KEY"; // 替换为你的访问密钥

  @override
  void initState() {
    super.initState();
    NextBillion.initNextBillion(ACCESS_KEY);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Maps')),
      body: Center(
        child: NBMap(
          onMapCreated: (controller) {
            controller.animateCamera(CameraUpdate.newLatLngZoom(LatLng(37.42, -122.14), 15));
          },
          initialCameraPosition: CameraPosition(
            target: LatLng(37.42, -112.14),
            zoom: 15.0,
          ),
        ),
      ),
    );
  }
}

地图组件配置

在 onMapCreated 回调中设置初始相机位置，并 动态更新用户位置。

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    NextBillion.initNextBillion(ACCESS_KEY);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Maps')),
      body: Center(
        child: NBMap(
          onMapCreated: (controller) {
            controller.animateCamera(CameraUpdate.newLatLngZoom(LatLng(37.42, -112.14), 15));
          },
          initialCameraPosition: CameraPosition(
            target: LatLng(37.42, -112.14),
            zoom: 15.0,
          ),
        ),
      ),
    );
  }
}

添加图像符号

通过 addImage 方法添加图像符号：

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

添加线标注

通过 addLine 方法添加线标注：

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,
  ),
);

更多操作

提供了一些地图操作方法的示例：

controller.animateCamera(CameraUpdate.newLatLngZoom(LatLng(37.42, -112.14), 15));
controller.moveCamera(CameraUpdate.newLatLng(const LatLng(37.42, -112.14)));