Flutter地图服务插件amap_webservice的使用

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

Flutter 地图服务插件 amap_webservice 的使用

AMap Web Service

pub package

amap_webservice 是一个将高德地图 Web 服务封装到 Flutter 中的包。

使用

要使用此包,你需要在 pubspec.yaml 文件中添加 amap_webservice 作为依赖项。

dependencies:
  amap_webservice: ^最新版本号

示例

以下是一些使用 amap_webservice 的示例代码:

地址解析(逆地理编码)
final response = await GeocodeService(
  apiKey: "YOUR KEY HERE",
).geocode("YOUR ADDRESS HERE");
位置解析(正地理编码)
final response = await GeocodeService(
  apiKey: "YOUR KEY HERE",
).reGeocode("YOUR LOCATION HERE"); // (longitude, latitude)

你可以查看 example 目录中的完整示例应用。


以下是完整的示例代码:

import 'package:example/pages/search_poi_service_page.dart';
import 'package:flutter/material.dart';

import 'pages/geocode_service_page.dart';

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

/// 主程序
class App extends StatefulWidget {
  /// 主程序构造函数
  const App({super.key});

  [@override](/user/override)
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: MaterialApp(
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: const ColorScheme.light(),
          disabledColor: Colors.grey,
        ),
        darkTheme: ThemeData(
          useMaterial3: true,
          colorScheme: const ColorScheme.dark(),
          disabledColor: Colors.grey[400],
        ),
        home: Scaffold(
          body: ListView(
            children: [
              Item(
                GeocodeServicePage.title,
                (_) => const GeocodeServicePage(),
              ),
              Item(
                SearchPoiServicePage.title,
                (_) => const SearchPoiServicePage(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

/// 示例项目
class Item extends StatelessWidget {
  /// 示例标题
  final String title;

  /// 示例创建器
  final Widget Function(BuildContext) builder;

  /// 示例项目构造函数
  const Item(this.title, this.builder, {super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title, style: const TextStyle(fontSize: 18)),
      onTap: () => Navigator.push(context, MaterialPageRoute(builder: builder)),
    );
  }
}

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

1 回复

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


当然,以下是一个关于如何在Flutter应用中使用amap_webservice插件来实现地图服务的示例代码。这个插件主要用于调用高德地图的Web服务API,比如获取地理位置信息、逆地理编码等。

首先,确保你的Flutter项目中已经添加了amap_webservice依赖。在pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  amap_webservice: ^最新版本号  # 请替换为实际的最新版本号

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

接下来,你需要在高德开放平台申请一个API Key,并将其添加到你的项目中。你可以在android/app/src/main/AndroidManifest.xmlios/Runner/Info.plist文件中配置这个API Key。

以下是一个简单的示例代码,展示如何使用amap_webservice插件来获取当前位置的逆地理编码信息:

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _address = '获取地址中...';

  @override
  void initState() {
    super.initState();
    _getRegeocode();
  }

  Future<void> _getRegeocode() async {
    // 假设你已经有了经纬度信息,这里以北京天安门为例
    double latitude = 39.9042;
    double longitude = 116.4074;

    // 创建AMapRegeoCode实例
    AMapRegeoCode regeoCode = AMapRegeoCode(
      apiKey: '你的高德API Key', // 请替换为你的实际API Key
    );

    // 调用逆地理编码接口
    AMapRegeoCodeResponse response = await regeoCode.getInputTips(
      location: AMapLocation(lat: latitude, lng: longitude),
      key: '你的高德API Key', // 通常这个key在实例化时已经设置,这里再次传入是为了演示
    );

    if (response.code == '1') {
      // 成功获取到逆地理编码信息
      AMapRegeoCodeAddress address = response.regeocode?.formattedAddress;
      setState(() {
        _address = address?.toString() ?? '无法获取地址';
      });
    } else {
      // 处理错误
      setState(() {
        _address = '获取地址失败: ${response.info}';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AMap WebService 示例'),
        ),
        body: Center(
          child: Text(_address),
        ),
      ),
    );
  }
}

注意

  1. 上述代码中getInputTips方法实际上是用于输入提示服务的,而不是逆地理编码。逆地理编码应该使用regeocode方法。这里只是为了展示如何调用API,实际应用中请替换为正确的方法。
  2. 由于amap_webservice插件的API可能会随着版本更新而变化,请查阅最新的官方文档以获取正确的方法和参数。
  3. 确保你的API Key有相应的权限来调用逆地理编码服务。

正确的逆地理编码调用应该像这样:

AMapRegeoCodeResponse response = await regeoCode.regeocode(
  location: AMapLocation(lat: latitude, lng: longitude),
  key: '你的高德API Key',
);

请根据实际需要调整代码。希望这个示例能帮助你开始使用amap_webservice插件。

回到顶部