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

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

开始使用

这个项目是一个新的Flutter插件项目。它包含适用于Android和/或iOS平台的特定平台实现代码。

示例代码

以下是使用latlong_maps插件的基本示例代码：

import 'package:flutter/material.dart';
import 'package:latlong_maps_example/samples/add_marker.dart';
import 'package:latlong_maps_example/samples/add_symbol.dart';
import 'package:latlong_maps_example/samples/place_circle.dart';
import 'page.dart';
import 'samples/full_map.dart';
import 'package:location/location.dart';
import 'package:latlong_maps_example/samples/map_picker_example_app.dart';
import 'package:latlong_maps_example/samples/map_with_search_bar.dart';
import 'package:latlong_maps_example/samples/direction_widget.dart';
import 'package:latlong_maps_example/samples/add_line.dart';
import 'package:latlong_maps_example/samples/annotation_order_maps.dart';
import 'package:latlong_maps_example/samples/click_annotations.dart';

final List<ExamplePage> _allPages = [
  const FullMapPage(),
  const AddMarkerPage(),
  const PlaceSymbolPage(),
  const LinePage(),
  const PlaceCirclePage(),
  const MapPickerExample(),
  const MapWithSearchBarPage(),
  const MapDirectionsPage(),
  const AnnotationOrderPage(),
  const ClickAnnotationPage()
];

class MapsDemo extends StatefulWidget {
  const MapsDemo({super.key});

  @override
  State<MapsDemo> createState() => _MapsDemoState();
}

class _MapsDemoState extends State<MapsDemo> {

  void _pushPage(BuildContext context, ExamplePage page) async {
    // 检查位置权限
    if (page.needsLocationPermission) {
      final location = Location();
      final hasPermissions = await location.hasPermission();
      if (hasPermissions != PermissionStatus.granted) {
        await location.requestPermission();
      }
    }
    // 如果组件已卸载，则返回
    if (!mounted) return;

    // 导航到新页面
    Navigator.of(context).push(MaterialPageRoute<void>(
        builder: (_) => Scaffold(
              appBar: AppBar(title: Text(page.title)),
              body: page,
            )));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Latlong Plugin Demo')),
      body: ListView.builder(
        itemCount: _allPages.length,
        itemBuilder: (_, int index) => index == _allPages.length
            ? const AboutListTile(
                applicationName: "",
              )
            : ListTile(
          leading: _allPages[index].leading,
          title: Text(_allPages[index].title),
          onTap: () => _pushPage(context, _allPages[index]),
        ),
      ),
    );
  }
}

void main() {
  runApp(const MaterialApp(home: MapsDemo()));
}

示例代码解释

1. 导入必要的库：

   import 'package:flutter/material.dart';
   import 'package:latlong_maps_example/samples/add_marker.dart'; // 添加标记
   import 'package:latlong_maps_example/samples/add_symbol.dart'; // 添加符号
   import 'package:latlong_maps_example/samples/place_circle.dart'; // 添加圆圈
   import 'package:location/location.dart'; // 获取位置信息
   

2. 定义所有页面列表：

   final List<ExamplePage> _allPages = [
     const FullMapPage(),
     const AddMarkerPage(),
     const PlaceSymbolPage(),
     const LinePage(),
     const PlaceCirclePage(),
     const MapPickerExample(),
     const MapWithSearchBarPage(),
     const MapDirectionsPage(),
     const AnnotationOrderPage(),
     const ClickAnnotationPage()
   ];
   

3. 创建一个状态类来管理页面导航：

   class _MapsDemoState extends State<MapsDemo> {
     void _pushPage(BuildContext context, ExamplePage page) async {
       // 检查位置权限
       if (page.needsLocationPermission) {
         final location = Location();
         final hasPermissions = await location.hasPermission();
         if (hasPermissions != PermissionStatus.granted) {
           await location.requestPermission();
         }
       }
       // 如果组件已卸载，则返回
       if (!mounted) return;
   
       // 导航到新页面
       Navigator.of(context).push(MaterialPageRoute<void>(
           builder: (_) => Scaffold(
                 appBar: AppBar(title: Text(page.title)),
                 body: page,
               )));
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: const Text('Latlong Plugin Demo')),
         body: ListView.builder(
           itemCount: _allPages.length,
           itemBuilder: (_, int index) => index == _allPages.length
               ? const AboutListTile(
                   applicationName: "",
                 )
               : ListTile(
             leading: _allPages[index].leading,
             title: Text(_allPages[index].title),
             onTap: () => _pushPage(context, _allPages[index]),
           ),
         ),
       );
     }
   }
   

4. 主函数启动应用：

   void main() {
     runApp(const MaterialApp(home: MapsDemo()));
   }