Flutter 地图位置展示插件 mappls_place_widget 的使用

Mappls Search Widget 包含了地点自动补全和地点选择器。

开始使用 Mappls Search Widget 在 Flutter 中

在你的项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  mappls_place_widget: ^1.0.2

现在在你的 Dart 代码中导入这个包：

import 'package:mappls_place_widget/mappls_place_widget.dart';

添加 Mappls 密钥

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

地点自动补全

使用方法 openPlaceAutocomplete 打开地点自动补全组件：

import 'dart:convert';

// 平台消息可能会失败，所以我们使用 try/catch 来捕获 PlatformException。
try {
  ELocation eLocation = await openPlaceAutocomplete(PlaceOptions(
    enableTextSearch: true,
    hint: "搜索地点"
  ));

  print(jsonEncode(eLocation.toJson()));
} on PlatformException {
  // 处理错误
}

你可以使用 PlaceOptions 来设置组件的属性：

1. filter(String): 此参数帮助你限制结果范围，可以指定一个有界的区域或某个 eloc（6位数字编码，用于任何POI、地区、城市等）。例如：

   • filter = bounds: 28.598882, 77.212407; 28.467375, 77.353513 (纬度，经度)
   • filter = cop: YMCZ0J (字符串)

2. hint(String): 设置搜索视图的提示信息。

3. historyCount(int): 最大历史记录结果数量。

4. pod(String): 这个参数用于限制结果到特定类型的地方。例如：

   • AutoSuggestCriteria.POD_SUB_LOCALITY
   • AutoSuggestCriteria.POD_LOCALITY
   • AutoSuggestCriteria.POD_CITY
   • AutoSuggestCriteria.POD_VILLAGE
   • AutoSuggestCriteria.POD_SUB_DISTRICT
   • AutoSuggestCriteria.POD_DISTRICT
   • AutoSuggestCriteria.POD_STATE
   • AutoSuggestCriteria.POD_SUB_SUB_LOCALITY

5. backgroundColor(String): 搜索组件的背景颜色。

6. toolbarColor(String): 设置组件工具栏的颜色。

7. saveHistory(bool): 如果设置为 true，则会显示已选的历史数据。

8. tokenizeAddress(bool): 提供结构化的地址属性。

9. zoom(double): 设置当前地图的缩放级别（最小值：4，最大值：18）。

10. location(LatLng): 设置搜索将围绕的中心位置。

11. attributionHorizontalAlignment(int): 设置 attribution 的水平对齐方式。值包括：

• PlaceOptions.GRAVITY_LEFT
• PlaceOptions.GRAVITY_CENTER
• PlaceOptions.GRAVITY_RIGHT

1. attributionVerticalAlignment(int): 设置 attribution 的垂直对齐方式。值包括：

• PlaceOptions.GRAVITY_TOP
• PlaceOptions.GRAVITY_BOTTOM

1. logoSize(int): 设置 logo 的大小。值包括：

• PlaceOptions.SIZE_SMALL
• PlaceOptions.SIZE_MEDIUM
• PlaceOptions.SIZE_LARGE

地点选择器

使用方法 openPlacePicker 打开地点选择器：

try {
  Place place = await openPlacePicker(PickerOption(
    includeSearch: true
  ));

  print(jsonEncode(place.toJson()));
} on PlatformException {
  // 处理错误
}

你可以使用 PickerOption 来设置组件的属性：

1. includeDeviceLocationButton(bool): 启用或禁用当前位置功能。

2. includeSearch(bool): 提供搜索位置的功能。

3. mapMaxZoom(double): 设置地图的最大缩放级别。

4. mapMinZoom(double): 设置地图的最小缩放级别。

5. placeOptions(PlaceOptions): 设置所有搜索组件的属性。

6. toolbarColor(String): 设置地点组件的工具栏颜色。

7. marker(Uint8List): 更改位于地图中心的标记图像。

8. startingCameraPosition(CameraPosition): 打开一个设置了相机位置的地图，可以设置缩放、中心、方向等。

9. startingBounds(LatLngBounds): 打开一个在指定边界内的地图。

完整示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用中使用 mappls_place_widget 插件。

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

void main() {
  runApp(MaterialApp(
    home: MyApp(),
    routes: <String, WidgetBuilder>{
      '/PlaceSearchWidget': (BuildContext context) => PlaceSearchWidget(),
      '/PlacePickerWidget': (BuildContext context) => PlacePickerWidget(),
    },
  ));
}

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

class _MyAppState extends State<MyApp> {
  static const String MAP_SDK_KEY = "YOUR_MAP_SDK_KEY";
  static const String REST_API_KEY = "YOUR_REST_API_KEY";
  static const String ATLAS_CLIENT_ID = "YOUR_ATLAS_CLIENT_ID";
  static const String ATLAS_CLIENT_SECRET = "YOUR_ATLAS_CLIENT_SECRET";

  [@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);
  }

  // 打开地点自动补全
  openPlaceSearch(BuildContext context) {
    Navigator.pushNamed(context, '/PlaceSearchWidget');
  }

  // 打开地点选择器
  openPlacePicker(BuildContext context) {
    Navigator.pushNamed(context, '/PlacePickerWidget');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('插件示例应用'),
      ),
      body: Center(
        child: Column(
          children: [
            SizedBox(height: 20),
            TextButton(
              onPressed: () => openPlaceSearch(context),
              child: Text("地点自动补全"),
            ),
            SizedBox(height: 20),
            TextButton(
              onPressed: () => openPlacePicker(context),
              child: Text("地点选择器"),
            ),
          ],
        ),
      ),
    );
  }
}