当前位置：首页 > news >正文

使用 Flutter 制作地图应用

news 2025/7/11 17:36:38

使用 Flutter 制作地图应用

在本文中，我将向您展示如何使用 Flutter 向您的应用程序添加地图功能。对于本教程，您将不需要 Google Maps API，因此您无需支付任何费用，因为我们将使用另一个免费 API。

开发前的准备工作

在开始开发前，建议使用 appuploader 工具来管理您的 iOS 开发证书和配置文件。这款 iOS 开发助手可以简化证书申请和管理的流程，让您更专注于开发工作。

依赖关系

创建一个新的 Flutter 项目，然后添加一些我们将要使用的依赖项。打开您的pubspec.yaml 文件并在依赖项中添加这些行：

flutter_map: any
geocoding: ^1.0.5
geocoder: ^0.2.1
tuple: ^1.0.2
latlong: ^0.6.1
positioned_tap_detector_2: ^1.0.0
transparent_image: ^1.0.0
async: ^2.1.0
flutter_image: ^3.0.0
vector_math: ^2.0.0
proj4dart: ^1.0.4
meta: ^1.1.0
collection: ^1.14.0

代码实现

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:geocoder/geocoder.dart';
import 'package:latlong/latlong.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapApp(),
    );
  }
}

class MapApp extends StatefulWidget {
  @override
  _MapAppState createState() => _MapAppState();
}

class _MapAppState extends State<MapApp> {
  double long = 49.5;
  double lat = -0.09;
  LatLng point = LatLng(49.5, -0.09);
  var location = [];

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        FlutterMap(
          options: MapOptions(
            onTap: (p) async {
              location = await Geocoder.local.findAddressesFromCoordinates(
                  new Coordinates(p.latitude, p.longitude));

              setState(() {
                point = p;
                print(p);
              });

              print(
                  "${location.first.countryName} - ${location.first.featureName}");
            },
            center: LatLng(49.5, -0.09),
            zoom: 5.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: point,
                  builder: (ctx) => Container(
                    child: Icon(
                      Icons.location_on,
                      color: Colors.red,
                    ),
                  ),
                )
              ],
            ),
          ],
        ),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 34.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Card(
                child: TextField(
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.all(16.0),
                    hintText: "Search for your localisation",
                    prefixIcon: Icon(Icons.location_on_outlined),
                  ),
                ),
              ),
              Card(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    children: [
                      Text(
                          "${location.first.countryName},${location.first.locality}, ${location.first.featureName}"),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

TextField 控件的使用技巧

TextField 是 Flutter 中常用的控件，它由多个控件组合而成。下面介绍几种常见的样式：

基本 TextField

TextField(
  decoration: InputDecoration(
    labelText: "最基本的的TextField",
  ),
)

限制字符长度

TextField(
  maxLength: 10,
  decoration: InputDecoration(
    labelText: "最多10个字符",
  ),
)

限制行数

TextField(
  maxLines: 2,
  decoration: InputDecoration(
    labelText: "两行文字，超出的文字上翻",
  ),
)

自定义样式

TextField(
  decoration: InputDecoration(
    labelText: "自定义样式",
    labelStyle: TextStyle(color: Colors.red),
    icon: Icon(Icons.account_box),
  ),
)