Flutter地图展示插件base_map_osm_google的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter 地图展示插件 base_map_osm_google 的使用

捕获

使用方式

创建一个新项目并添加该插件。

// 导入所需的包
import 'package:base_map_osm_google/base_map_osm_google.dart';
import 'package:flutter/material.dart';

// 主函数入口
void main() => runApp(const MyApp());

// 定义主应用类
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 构建MaterialApp,这是Flutter的基本应用结构
    return MaterialApp(
      title: '基地图 OSM Google',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('OSM - Google 基地图示例'),
        ),
        // 设置页面主体部分
        body: Column(
          children: [
            // 添加地图组件
            BaseMapOsmGoogle(typeMap: TypeMap.osm),
          ],
        ),
      ),
    );
  }
}

完整示例代码

import 'package:base_map_osm_google/base_map_osm_google.dart';
import 'package:flutter/material.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 Google',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('OSM - Google 基地图示例'),
        ),
        body: Column(
          children: [
            // 显示OSM地图
            BaseMapOsmGoogle(typeMap: TypeMap.osm),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是一个使用 base_map_osm_google 插件在 Flutter 应用中展示地图的示例代码。这个插件支持显示 OpenStreetMap 和 Google Maps。请确保你已经在 pubspec.yaml 文件中添加了该插件的依赖,并且已经运行了 flutter pub get

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  base_map_osm_google: ^x.y.z  # 请将 `x.y.z` 替换为最新版本号

主代码文件 main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late MapController _mapController;

  @override
  void initState() {
    super.initState();
    // 初始化 MapController,设置初始位置等
    _mapController = MapController(
      initialCameraPosition: CameraPosition(
        target: LatLng(37.7749, -122.4194), // 旧金山
        zoom: 14.0,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Map Example'),
      ),
      body: Stack(
        children: [
          BaseMap(
            mapController: _mapController,
            mapType: MapType.google, // 使用 Google Maps
            apiKey: 'YOUR_GOOGLE_MAPS_API_KEY', // 请替换为你的 Google Maps API Key
            // 如果想使用 OpenStreetMap,可以使用以下配置
            // mapType: MapType.osm,
            // osmUrlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          ),
          // 这里可以添加其他地图覆盖物,例如标记、多边形等
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 例如,中心定位到当前位置
          // 需要添加位置权限和定位逻辑
          // _mapController.animateCamera(CameraUpdate.newLatLng(LatLng(你的纬度, 你的经度)));
        },
        tooltip: 'Center Map',
        child: Icon(Icons.location_on),
      ),
    );
  }
}

注意事项

  1. Google Maps API Key:

    • 替换 YOUR_GOOGLE_MAPS_API_KEY 为你的 Google Maps API Key。
    • 确保你的 API Key 已经在 Google Cloud Console 中启用了相关的 Maps API 服务。
  2. 权限:

    • 如果你的应用需要访问设备的位置信息,请确保在 AndroidManifest.xmlInfo.plist 中添加相应的权限声明。
  3. 依赖管理:

    • 确保你的 Flutter 环境已经正确配置,并且已经运行了 flutter pub get 来安装依赖。
  4. 插件版本:

    • 替换 x.y.zbase_map_osm_google 插件的最新版本号。

这个示例展示了如何使用 base_map_osm_google 插件在 Flutter 应用中展示地图,并提供了基础的地图控制器配置。你可以根据需求进一步扩展,例如添加标记、多边形、覆盖物等。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!