Flutter周边服务搜索插件mappls_nearby_plugin的使用

Flutter周边服务搜索插件mappls_nearby_plugin的使用

<Mappls-b-logo.svg>

Mappls附近小部件

Mappls附近的Flutter小部件使在您的Flutter应用中集成搜索附近POI（兴趣点）的功能变得简单。它提供了通过Mappls地图进行径向搜索附近地点的功能。 该小部件提供了以下基本功能：

• 直接使用Mappls地图可视化界面搜索附近地点的能力。
• 一个方法可以跨所有Mappls可用的地点类别发起附近搜索。
• 能够通过回调从Mappls附近搜索小部件获取信息。

可以通过以下简单步骤完成这些功能。

开始使用

要在flutter中使用Mappls附近小部件，请在项目的pubspec.yaml文件中添加以下依赖项：

dependencies:
  mappls_nearby_plugin: ^1.0.0

现在，在您的dart代码中导入此包：

import 'package:mappls_nearby_plugin/mappls_nearby_plugin.dart';

添加Mappls密钥

您必须通过MapplsAccountManager类提供您的密钥。（点击这里）

使用附近小部件

使用openNearbyWidget方法打开附近小部件：

// 平台消息可能会失败，所以我们使用try/catch来捕获PlatformException。
try {
  NearbyResult nearbyResult = await openNearbyWidget();
} on PlatformException {
  
}

完整示例代码

以下是完整的示例代码，展示了如何使用mappls_nearby_plugin插件。

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:mappls_nearby_plugin/mappls_nearby_plugin.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

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

class _MyAppState extends State<MyApp> {
  static const String MAP_SDK_KEY = "您的MAP SDK密钥";
  static const String REST_API_KEY = "您的REST API密钥";
  static const String ATLAS_CLIENT_ID = "您的ATLAS客户端ID";
  static const String ATLAS_CLIENT_SECRET = "您的ATLAS客户端密钥";
  NearbyResult? _nearbyResult;

  [@override](/user/override)
  void initState() {
    super.initState();
    MapplsAccountManager.setMapSDKKey(MAP_SDK_KEY);
    MapplsAccountManager.setRestAPIKey(REST_API_KEY);
    MapplsAccountManager.setAtlasClientId(ATLAS_CLIENT_ID);
    MapplsAccountManager.setAtlasClientSecret(ATLAS_CLIENT_SECRET);
    _nearbyResult = NearbyResult();
  }

  void openMapplsNearbyWidget() async {
    NearbyResult nearbyResult;

    // 平台消息可能会失败，所以我们使用try/catch来捕获PlatformException。
    try {
      nearbyResult = await openNearbyWidget(nearbyUIOption: NearbyUIOption(categoryIconColor: "#FF0000"));
    } on PlatformException {
      nearbyResult = NearbyResult();
    }
    print(json.encode(nearbyResult.toJson()));

    // 如果在异步平台消息飞行时小部件已从树中移除，则我们想要丢弃回复而不是调用setState以更新我们的非存在的外观。
    if (!mounted) return;

    setState(() {
      _nearbyResult = nearbyResult;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Nearby Plugin example'),
        ),
        body: Center(
          child: Column(
            children: [
              SizedBox(height: 20),
              Text(_nearbyResult?.distance == null ? '距离: ' : '距离: ${_nearbyResult?.distance}'),
              SizedBox(height: 20),
              Text(_nearbyResult?.mapplsPin == null ? '位置: ' : '位置: ${_nearbyResult?.mapplsPin}'),
              SizedBox(height: 20),
              Text(_nearbyResult?.placeName == null ? '地点名称: ' : '地点名称: ${_nearbyResult?.placeName}'),
              SizedBox(height: 20),
              Text(_nearbyResult?.placeAddress == null ? '地点地址: ' : '地点地址: ${_nearbyResult?.placeAddress}'),
              SizedBox(height: 20),
              Text(_nearbyResult?.orderIndex == null ? '索引: ' : '索引: ${_nearbyResult?.orderIndex}'),
              SizedBox(height: 20),
              TextButton(
                child: Text('打开附近搜索小部件'),
                onPressed: () => openMapplsNearbyWidget(),
              )
            ]
          )
        )
      ),
    );
  }
}