Flutter 地图展示插件 OLA Maps 的使用

OLA Maps - Geocode API

版本: 0.02
OAS: 3.0
API 规范: <code>/openapi/geocode-oas.yaml</code>

OLA Maps - Geocode API 插件提供了全面的地理数据工具套件，包括正向和反向地理编码、路线规划、道路信息、地点搜索和地图切片 API。

功能特性

• 正向地理编码 API: 将地址或地点名称转换为地理坐标（纬度和经度）。
• 反向地理编码 API: 将地理坐标转换回人类可读的地址或地点名称。
• 路线规划 API: 提供多个地点之间的方向和路径优化。
• 道路 API: 获取道路段信息并计算距离。
• 地点 API: 搜索并提供感兴趣的地点详情。
• 地图切片 API: 获取地图切片以可视化表示地理区域。

开始使用

要使用此插件，您需要设置项目并包含您的 OLA Maps API 密钥。

添加依赖

在 pubspec.yaml 文件中添加 ola_maps 依赖：

dependencies:
  ola_maps: ^0.0.2

导入包

在 Dart 文件中导入包：

import 'package:ola_maps/ola_maps.dart';

初始化

在使用任何 API 之前，初始化 OLA Maps 实例并传入您的 API 密钥：

void main() {
  Olamaps.instance.initialize('YOUR_API_KEY_HERE');
  runApp(const MyApp());
}

示例

以下是一个完整的示例，演示如何在 Flutter 应用程序中使用地理编码 API：

import 'dart:developer';

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

void main() {
  Olamaps.instance.initialize('YUCBZ4cDDpdTEwov513rxxxxxxxxxxxx');
  runApp(const MyApp());
}

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Padding(
              padding: EdgeInsets.symmetric(vertical: 12),
              child: Text(
                'GeoEncoder API',
                style: TextStyle(fontSize: 24),
              ),
            ),
            TextButton(
              onPressed: () async {
                try {
                  var result = await Olamaps.instance.geoencoder.fetchLocation(
                    'Ola Electric, 2, Hosur Rd, Koramangala Industrial Layout, Koramangala, Bengaluru, 560095, Karnataka',
                  );
                  for (var address in result) {
                    log("Addresses:: ${address.toJson()}");
                  }
                } catch (ex, st) {
                  log("Error Occurred $ex $st");
                }
              },
              child: const Text('测试地理编码'),
            ),
            TextButton(
              onPressed: () async {
                try {
                  var result = await Olamaps.instance.geoencoder.fetchAddresses(
                    Location(lng: 77.5526110768168, lat: 12.923946516889448),
                  );
                  for (var address in result) {
                    log("Addresses:: ${address.toJson()}");
                  }
                } catch (ex, st) {
                  log("Error Occurred $ex $st");
                }
              },
              child: const Text('测试逆向地理编码'),
            ),
            const Padding(
              padding: EdgeInsets.symmetric(vertical: 12),
              child: Text(
                'Places API',
                style: TextStyle(fontSize: 24),
              ),
            ),
            TextButton(
              onPressed: () async {
                try {
                  var result = await Olamaps.instance.places.getAutocompleteSuggestions(
                    input: 'kempe',
                  );
                  for (var address in result) {
                    log("AutoComplete Results:: ${address.toJson()}");
                  }
                } catch (ex, st) {
                  log("Error Occurred $ex $st");
                }
              },
              child: const Text('测试自动完成结果'),
            ),
            TextButton(
              onPressed: () async {
                try {
                  var result = await Olamaps.instance.places.getTextPredictions(
                    location: Location(
                        lng: 77.5526110768168, lat: 12.923946516889448),
                    types: ['Cafes'],
                    input: 'Cafes in Koramangala',
                  );
                  for (var address in result) {
                    log("Cafe:: ${address.toJson()}");
                  }
                } catch (ex, st) {
                  log("Error Occurred $ex $st");
                }
              },
              child: const Text('测试文本搜索'),
            ),
            TextButton(
              onPressed: () async {
                try {
                  var result = await Olamaps.instance.places.getPlaceDetails(
                      placeId: 'ola-platform:a79ed32419962a11a588ea92b83ca78e');
                  log("RESULT>> $result");
                } catch (ex, st) {
                  log("Error Occurred $ex $st");
                }
              },
              child: const Text('测试地点详情'),
            ),
            TextButton(
              onPressed: () async {
                try {
                  var result = await Olamaps.instance.places.getNearBySearchPlaces(
                    location: Location(
                        lng: 77.5526110768168, lat: 12.923946516889448),
                    layers: ['venue'],
                    types: ['restaurant'],
                  );
                  for (var address in result) {
                    log("Near By Place:: ${address.toJson()}");
                  }
                } catch (ex, st) {
                  log("Error Occurred $ex $st");
                }
              },
              child: const Text('测试附近地点'),
            ),
            const Padding(
              padding: EdgeInsets.symmetric(vertical: 12),
              child: Text(
                '自动完成搜索字段',
                style: TextStyle(fontSize: 24),
              ),
            ),
            SizedBox(
              height: 54,
              width: 356,
              child: OlaMapsAutocomplete(
                hintText: '搜索位置',
                decoration: const CustomDropdownDecoration(
                    closedFillColor: Colors.transparent,
                    hintStyle: TextStyle(fontSize: 12, color: Colors.black)),
                onChanged: (value) {
                  log((value?.toJson()).toString());
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}