Flutter地图位置搜索插件mapmyindia_place_widget的使用

Flutter 地图位置搜索插件 mapmyindia_place_widget 的使用

简介

MapmyIndia 搜索小部件包含地址自动完成和地点选择器功能。

开始使用

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

dependencies:  
  mapmyindia_place_widget: ^0.2.0

然后在 Dart 代码中导入这个包：

import 'package:mapmyindia_place_widget/mapmyindia_place_widget.dart'; 

添加 MapmyIndia 密钥

你必须通过 MapmyIndiaAccountManager 类提供你的密钥。具体操作可以参考 这里。

地址自动完成

使用 openPlaceAutocomplete 方法打开地址自动完成功能：

// 平台消息可能会失败，因此我们使用 try/catch 处理 PlatformException。
try {  
  ELocation eLocation = await openPlaceAutocomplete(PlaceOptions(enableTextSearch: true, hint: "search Location"));  
  print(json.encode(eLocation.toJson()));  
} on PlatformException {  
  // 处理异常
}

你可以使用 PlaceOptions 设置小部件的属性：

• filter(String): 用于限制结果范围，例如指定一个区域或某些特定的地点（如POI、地标等）。
• hint(String): 设置搜索框中的提示信息。
• historyCount(int): 最多显示的历史记录数量。
• pod(String): 用于限制结果类型。
• backgroundColor(String): 设置搜索框的背景颜色。
• toolbarColor(String): 设置工具栏的颜色。
• saveHistory(bool): 是否保存历史记录。
• tokenizeAddress(bool): 是否解析地址。
• zoom(double): 设置当前地图的缩放级别。
• location(LatLng): 设置搜索中心点的位置。
• attributionHorizontalAlignment(int): 设置 attribution 的水平对齐方式。
• attributionVerticalAlignment(int): 设置 attribution 的垂直对齐方式。
• logoSize(int): 设置 logo 的大小。

地点选择器

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

try {   
  Place place = await openPlacePicker(PickerOption(includeSearch: true));  
  print(json.encode(place.toJson()));  
} on PlatformException {  
  // 处理异常
}

你可以使用 PickerOption 设置小部件的属性：

• includeDeviceLocationButton(bool): 启用或禁用当前位置功能。
• includeSearch(bool): 提供搜索地点的功能。
• mapMaxZoom(double): 设置地图的最大缩放级别。
• mapMinZoom(double): 设置地图的最小缩放级别。
• placeOptions(PlaceOptions): 设置搜索框的所有属性。
• toolbarColor(String): 设置工具栏的颜色。
• marker(Uint8List): 更改地图中心点的标记图像。
• statingCameraPosition(CameraPosition): 设置地图的初始相机位置。
• startingBounds(LatLngBounds): 设置地图的初始边界。

完整示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:mapmyindia_place_widget/mapmyindia_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();

    MapmyIndiaAccountManager.setMapSDKKey(MAP_SDK_KEY);
    MapmyIndiaAccountManager.setRestAPIKey(REST_API_KEY);
    MapmyIndiaAccountManager.setAtlasClientId(ATLAS_CLIENT_ID);
    MapmyIndiaAccountManager.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("地点选择器"),
          ),
        ]),
      ),
    );
  }
}