Flutter地理编码插件osm_geocoder的使用

Flutter地理编码插件osm_geocoder的使用

地图编码插件osm_geocoder 可以帮助你在Flutter应用中获取地理信息。它无需API密钥即可获得详细的位置数据，并且使用的是 Open Street Map 的数据。

获取坐标位置数据

使用坐标从Open Street Map获取位置数据非常简单：

Coordinates coordinates = Coordinates(-5.837799, -35.203978);
LocationData data = await OSMGeocoder.findDetails(coordinates);

LocationData 类

LocationData 类包含以下字段：

int placeId;
String osmType;
int id;
String lat;
String lon;
int placeRank;
double importance;
String displayName;
Address address;
List<String> boundingbox;

Address 类

Address 类提供了详细的地址信息：

String road;
String suburb;
String city;
String stateDistrict;
String state;
String iso31662Lvl4;
String postcode;
String country;
String countryCode;

更多详细信息，请参阅文档。

关于OpenStreetMap

OpenStreetMap 是一个协作项目，旨在创建和分发免费的地理数据，这些数据没有法律或技术限制，可以自由使用。

该项目已有20年的历史，目前正处于其第6版API阶段，并在包括巴西在内的多个国家设有子项目。

完整示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用osm_geocoder插件来搜索地址并显示结果：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OSM Geocoder Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const DemoGeocoderPage(title: 'OSM Geocoder Demo'),
    );
  }
}

class DemoGeocoderPage extends StatefulWidget {
  const DemoGeocoderPage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<DemoGeocoderPage> createState() => _DemoGeocoderPageState();
}

class _DemoGeocoderPageState extends State<DemoGeocoderPage> {
  final TextEditingController _controller = TextEditingController(text: 'UFRN');
  List<MapData> _result = [];
  bool _isLoading = false;

  Future<void> _searchAddress() async {
    final query = _controller.text;

    setState(() {
      _isLoading = true;
    });

    try {
      final result = await OSMGeocoder.query(query);
      setState(() {
        _result = result;
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _isLoading = false;
      });

      print("Error: $e");
    }
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    _searchAddress();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(children: [
          TextField(
            controller: _controller,
            decoration: InputDecoration(
              labelText: 'Search address:',
              border: const OutlineInputBorder(),
              suffixIcon: IconButton(
                  autofocus: true,
                  onPressed: _searchAddress,
                  icon: const Icon(Icons.search)),
            ),
          ),
          const SizedBox(height: 16.0),
          _isLoading
              ? const CircularProgressIndicator()
              : Expanded(
                  child: ListView.builder(
                      itemCount: _result.length,
                      itemBuilder: (context, index) {
                        final address = _result[index];
                        return Padding(
                          padding: const EdgeInsets.only(bottom: 16.0),
                          child: ListTile(
                            leading: const Icon(Icons.location_on),
                            tileColor:
                                Theme.of(context).colorScheme.primaryContainer,
                            iconColor:
                                Theme.of(context).colorScheme.inversePrimary,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(16.0),
                            ),
                            title: Text(address.displayName),
                            subtitle: Text(
                                "Lat: ${address.lat} | Lon: ${address.lon}"),
                          ),
                        );
                      }),
                ),
        ]),
      ),
    );
  }
}