Flutter MapLibre GL 使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00111/article/details/142839581

Flutter MapLibre GL 使用指南

flutter-maplibre-gl A flutter package for showing customizable vector/raster maps with MapLibre (forked from tobrun/flutter-mapbox-gl) 项目地址: https://gitcode.com/gh_mirrors/fl/flutter-maplibre-gl

项目介绍

Flutter MapLibre GL 是一个强大的 Flutter 插件，使开发者能够在 Flutter 应用中嵌入高度交互且可定制的矢量地图。本项目源自 flutter-mapbox-gl 的分支，现已被转移至 MapLibre 组织，并将 Mapbox GL 库替换为开源的 MapLibre GL 库，确保了性能和厂商中立性。它支持通过 maplibre-gl-js 实现在Web平台上的使用，以及通过 maplibre-native 支持安卓和iOS端，提供了一系列丰富的API接口，以满足大多数地图展示需求。

项目快速启动

要迅速开始使用 Flutter MapLibre GL，遵循以下步骤：

添加依赖

在 Flutter 项目中添加此插件，可以通过运行以下命令：

flutter pub add maplibre_gl

或者，在您的 pubspec.yaml 文件中手动添加：

dependencies:
  maplibre_gl: ^0.19.0

之后执行 flutter pub get 来获取依赖项。

配置平台特定权限

iOS: 不再需要特殊的设置，但若需访问地理位置，须在 ios/Runner/Info.plist 添加权限描述：
```
<key>NSLocationWhenInUseUsageDescription</key>
<string>显示您在地图上的位置</string>
```
Android: 同样无需特殊配置。若展示用户位置，则在 android/app/src/main/AndroidManifest.xml 中加入权限：
```
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
```
对于 Android 6.0（API 23）及以上版本，还需在运行时请求这些权限。

Web: 在 web/index.html 的 <head> 部分包含以下JavaScript和CSS文件：

<script src='https://unpkg.com/maplibre-gl@^4.3/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@^4.3/dist/maplibre-gl.css' rel='stylesheet'/>

示例代码片段

基本的地图初始化示例：

import 'package:flutter/material.dart';
import 'package:maplibre_gl/maplibre_gl.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MapLibreMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: LatLng(37.7749, -122.4194), // San Francisco coordinates
            zoom: 13,
          ),
          styleString: 'https://maps.maplibre.org/maplibre-gl-style-sdk-master/gl-style.json', // 或本地样式路径
        ),
      ),
    );
  }

  void _onMapCreated(MapLibreMapController controller) {
    print('Map created');
    // 这里可以进一步控制地图行为
  }
}