Flutter地图展示插件flutter_open_street_map的使用

Flutter 地图展示插件 flutter_open_street_map 的使用

特性

• 从地图上选择位置
• 按地点搜索位置
• 使用简单

目标

此库旨在为所有平台的 Flutter 应用程序使用开源地图设置位置。

开始使用

在 Dart 文件中导入以下包：

import 'package:flutter_open_street_map/open_street_map.dart';

使用方法非常简单，只需调用以下组件。你需要传递默认的地图中心位置，并且需要一个 onPicked 方法来获取从地图上选择的位置。

FlutterOpenStreetMap(
  center: LatLong(23, 89),
  onPicked: (pickedData) {
  }
)

进一步使用

现在，如果你按下 “Set Location” 按钮，你将通过 onPicked 方法获得所选位置。

在 onPicked 方法中，你会收到 pickedData。

pickedData 包含两个属性：

1. latLong
2. address

latLong 包含两个属性：

1. latitude
2. longitude

例如：

FlutterOpenStreetMap(
  center: LatLong(23, 89),
  onPicked: (pickedData) {
     print(pickedData.latLong.latitude);
     print(pickedData.latLong.longitude);
     print(pickedData.address);
  }
)

你可以通过这种方式获取纬度、经度和地址。

完整示例

import 'package:flutter/material.dart';
import 'package:flutter_open_street_map/open_street_map.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FlutterOpenStreetMap(
        buttonText: "Set Location",
        locationIconColor: Colors.blue,
        buttonForegroundColor: Colors.white,
        buttonTextStyle: TextStyle(fontSize: 20),
        center: LatLong(5, 10),
        onPicked: (pickedData) {
          print(pickedData.latLong.latitude);
          print(pickedData.latLong.longitude);
          print(pickedData.addressName);
          print(pickedData.address);
        },
      ),
    );
  }
}