Flutter地图展示插件ako_map的使用

Flutter地图展示插件ako_map的使用

Ako Map 是一个基于 OpenStreetMap 包的 Ako Core 扩展模块。

Ako组件

以下是 Ako 提供的组件列表。

注意: 这个列表可能不完整。

小部件
名称 描述 版本
AkoOsmMap 简单的内联地图，可选底部抽屉窗口 0.1.0
AkoOsmBottomSheet 具有全尺寸地图的底部抽屉窗口 0.1.0
外部依赖
名称 描述 版本 依赖版本
Flutter OSM Ako 依赖于 flutter_osm_plugin 并通过 package:ako_osm/flutter_osm_plugin.dart 导出它 0.1.0 1.1.0

许可证

版权所有 2023-2024 的 Ako 作者（https://pub.dev/packages/ako）。 Ako 是在 Mozilla 公共许可证 2.0 版下发布的免费软件。

完整示例代码

下面是一个完整的示例代码，展示了如何使用 AkoOsmMap 和 AkoOsmBottomSheet。

import 'package:flutter/material.dart';
import 'package:ako_osm/flutter_osm_plugin.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Maps Demo',
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  // 控制器用于控制地图的行为
  final controller = MapController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Maps Demo'),
      ),
      body: Column(
        children: [
          // 使用 AkoOsmMap 显示地图
          AkoOsmMap(
            controller: controller,
            initialPosition: GeoPoint(latitude: 48.858844, longitude: 2.294351),
            // 添加其他参数以自定义地图
            markerIcon: Icon(Icons.location_on),
            markerColor: Colors.red,
            onLocationChanged: (GeoPoint position) {
              print("当前位置: ${position.latitude}, ${position.longitude}");
            },
          ),
          // 使用 AkoOsmBottomSheet 显示带有全尺寸地图的底部抽屉
          AkoOsmBottomSheet(
            controller: controller,
            initialPosition: GeoPoint(latitude: 48.858844, longitude: 2.294351),
            // 添加其他参数以自定义底部抽屉
            markerIcon: Icon(Icons.location_on),
            markerColor: Colors.blue,
            onLocationChanged: (GeoPoint position) {
              print("当前位置: ${position.latitude}, ${position.longitude}");
            },
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


ako_map 是一个用于在 Flutter 应用中展示地图的插件。它基于高德地图 SDK，提供了丰富的功能来展示和交互地图数据。以下是如何在 Flutter 项目中使用 ako_map 的基本步骤和示例代码。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 ako_map 依赖：

dependencies:
  flutter:
    sdk: flutter
  ako_map: ^0.0.1  # 请根据最新版本号替换

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

2. 配置高德地图 SDK

在使用 ako_map 之前，你需要先配置高德地图的 SDK。

iOS 配置

在 ios/Runner/Info.plist 文件中添加以下内容：

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要访问您的位置以提供地图服务</string>
<key>AMapApiKey</key>
<string>你的高德地图 API Key</string>

Android 配置

在 android/app/src/main/AndroidManifest.xml 文件中添加以下内容：

<application>
    <meta-data
        android:name="com.amap.api.v2.apikey"
        android:value="你的高德地图 API Key" />
</application>

3. 基本使用

在 Flutter 项目中使用 ako_map 展示地图非常简单。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ako Map Example'),
        ),
        body: AkoMap(),
      ),
    );
  }
}

class AkoMap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: AkoMapView(
        initialCameraPosition: CameraPosition(
          target: LatLng(39.92, 116.46), // 北京的经纬度
          zoom: 10.0,
        ),
        onMapCreated: (controller) {
          // 地图创建完成后可以获取控制器
        },
      ),
    );
  }
}

4. 常用功能

ako_map 提供了许多常用的地图功能，例如：

  • 添加标记：使用 Marker 类在地图上添加标记。
  • 绘制多边形：使用 Polygon 类在地图上绘制多边形。
  • 绘制折线：使用 Polyline 类在地图上绘制折线。
  • 定位：使用 Location 类获取用户当前位置。
  • 地图交互：通过 MapController 控制地图的缩放、移动等操作。

5. 示例代码

以下是一个添加标记的示例：

Marker(
  markerId: MarkerId('marker_1'),
  position: LatLng(39.92, 116.46),
  infoWindow: InfoWindow(
    title: '北京',
    snippet: '中国首都',
  ),
  icon: BitmapDescriptor.defaultMarker,
)
回到顶部