Flutter地理位置与地图展示插件geo_map的使用

在Flutter开发中，geo_map 是一个功能强大且可定制的地图插件，能够帮助开发者轻松实现地理位置的展示和交互。本文将通过一个完整的示例演示如何使用 geo_map 插件来构建一个基础的地图页面。

示例代码详解

以下是一个简单的示例代码，展示了如何使用 geo_map 插件在 Flutter 应用中展示地图。

// 导入必要的库
import 'package:flutter/material.dart';

// 引入自定义的地图页面文件
import 'src/map_page.dart'; // 假设地图页面逻辑存储在 src/map_page.dart 文件中

void main() {
  // 确保 Flutter 绑定初始化完成
  WidgetsFlutterBinding.ensureInitialized();
  
  // 运行应用
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      // 禁用调试模式下的角标
      debugShowCheckedModeBanner: false,
      
      // 设置初始页面为 MapPage
      home: MapPage(),
    );
  }
}

自定义地图页面 (map_page.dart)

接下来，我们创建一个 MapPage 页面，用于加载和展示地图。

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:geo_map/geo_map.dart'; // 引入 geo_map 插件

class MapPage extends StatefulWidget {
  [@override](/user/override)
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Geo Map 示例'),
      ),
      body: Center(
        child: GeoMap( // 使用 GeoMap 构建地图
          initialCameraPosition: CameraPosition(
            target: LatLng(39.9042, 116.4074), // 设置初始中心位置（北京）
            zoom: 10, // 设置初始缩放级别
          ),
        ),
      ),
    );
  }
}

更多关于Flutter地理位置与地图展示插件geo_map的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter地理位置与地图展示插件geo_map的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，如果你想展示地图并处理地理位置信息，可以使用 flutter_map 插件。flutter_map 是一个基于 Leaflet 的 Flutter 地图插件，它支持多种地图瓦片（tiles）提供商，并且可以轻松地在地图上添加标记、多边形、线条等。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_map 和 geolocator 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_map: ^4.0.0
  geolocator: ^9.0.0

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

2. 获取地理位置

使用 geolocator 插件来获取设备的当前位置：

import 'package:geolocator/geolocator.dart';

Future<Position> _getCurrentLocation() async {
  bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
  if (!serviceEnabled) {
    return Future.error('Location services are disabled.');
  }

  LocationPermission permission = await Geolocator.checkPermission();
  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
    if (permission == LocationPermission.denied) {
      return Future.error('Location permissions are denied');
    }
  }

  if (permission == LocationPermission.deniedForever) {
    return Future.error('Location permissions are permanently denied, we cannot request permissions.');
  }

  return await Geolocator.getCurrentPosition();
}

3. 展示地图

使用 flutter_map 来展示地图，并将获取到的地理位置作为地图的中心点：

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

class MapScreen extends StatefulWidget {
  [@override](/user/override)
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  LatLng? _currentLocation;

  [@override](/user/override)
  void initState() {
    super.initState();
    _getCurrentLocation().then((position) {
      setState(() {
        _currentLocation = LatLng(position.latitude, position.longitude);
      });
    });
  }

  Future<Position> _getCurrentLocation() async {
    bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      return Future.error('Location services are disabled.');
    }

    LocationPermission permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        return Future.error('Location permissions are denied');
      }
    }

    if (permission == LocationPermission.deniedForever) {
      return Future.error('Location permissions are permanently denied, we cannot request permissions.');
    }

    return await Geolocator.getCurrentPosition();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Map Example'),
      ),
      body: _currentLocation == null
          ? Center(child: CircularProgressIndicator())
          : FlutterMap(
              options: MapOptions(
                center: _currentLocation,
                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: _currentLocation!,
                      builder: (ctx) => Icon(
                        Icons.location_on,
                        color: Colors.red,
                        size: 40.0,
                      ),
                    ),
                  ],
                ),
              ],
            ),
    );
  }
}
回到顶部