Flutter Maps 开源项目教程

余伊日Estra

于 2024-08-27 08:41:10 发布

阅读量531

点赞数 12

本文链接：https://blog.csdn.net/gitblog_00131/article/details/141586321

版权

Flutter Maps 开源项目教程

flutter_mapsA Flutter app using Google Maps SDK, Directions API项目地址:https://gitcode.com/gh_mirrors/fl/flutter_maps

项目介绍

Flutter Maps 是一个用于 Flutter 应用的映射包，它简单易学，同时完全可定制和可配置。该项目支持任何静态栅格瓦片服务器，包括从网络服务器、本地文件系统或应用资产存储中获取。此外，通过社区维护的插件，还支持矢量瓦片。

项目快速启动

安装

首先，在您的 Flutter 项目中添加 flutter_maps 依赖：

dependencies:
  flutter_maps: ^0.0.1

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

基本使用

以下是一个简单的示例，展示如何在 Flutter 应用中使用 Flutter Maps：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Maps Demo'),
        ),
        body: FlutterMap(
          options: MapOptions(
            center: LatLng(51.5, -0.09),
            zoom: 13.0,
          ),
          layers: [
            TileLayerOptions(
              urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
              subdomains: ['a', 'b', 'c'],
            ),
            MarkerLayerOptions(
              markers: [
                Marker(
                  width: 80.0,
                  height: 80.0,
                  point: LatLng(51.5, -0.09),
                  builder: (ctx) => Container(
                    child: FlutterLogo(),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}