搜索地图地点

这是一个Flutter包，它使用Google Maps API来创建一个TextField，该TextField会在用户输入时尝试自动完成地点，并带有简单的流畅动画，提供良好的UI和UX。它还将提供有关用户选定地点的重要信息，例如坐标、用于确定GoogleMap小部件缩放的边界等等。

example

这是使用此包可以完成的一个示例。要查看源代码，请查看示例文件夹。

入门

要安装，请将其添加到您的pubspec.yaml文件中

dependencies:
    search_map_place: <latest>

之后，请确保您已在Google Cloud Platform中激活了以下API

  • Places
  • Geolocation
  • Geocoding

您现在可以将其导入您的文件并在您的应用程序中使用它。

import 'package:search_map_place/search_map_place.dart';

如何使用它

在您想添加搜索小部件的地方，调用SearchMapPlaceWidget的构造函数

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: SearchMapPlaceWidget(
        apiKey: // YOUR GOOGLE MAPS API KEY
      )
    )
  );
}

构造函数有7个与API相关的属性

  • String apiKey是唯一必需的属性。它是您应用程序正在使用的Google Maps API密钥
  • (Place) void onSelected是当用户选择一个自动完成选项时调用的回调函数。
  • (Place) void onSearch是当用户点击搜索图标时调用的回调函数。
  • String language是用于自动完成的语言。默认为'en'（英语）。请查看Google Maps API的支持的语言完整列表
  • LatLng location是您希望检索地点信息的目标点。如果提供了此值，则还必须提供radius。
  • int radius是在其中返回地点结果的距离（以米为单位）。请注意，设置半径会使结果偏向指定区域，但可能不会完全限制结果仅在该指定区域内。如果提供了此值，则还必须提供location。请参阅Google Maps API文档中的位置偏向和位置限制。
  • bool restrictBounds将仅返回严格位于location和radius定义的区域内的地点。
  • PlaceType placeType将允许您按类型过滤地点。有关可用类型的更多信息，请查看自动完成支持的类型。默认情况下，请求中不传递任何过滤器，这意味着所有地点类型都将在自动完成中显示。

Place类

此类将在onSelected和onSearch方法中返回。它允许我们获取有关用户所选地点的更多信息。

最初，它只提供基本信息

  • description包含返回结果的人类可读名称。对于机构结果，这通常是公司名称。
  • placeId一个文本标识符，唯一标识一个地点。有关地点ID的更多信息，请参阅Place IDs概述。
  • types包含适用于该地点的类型的数组。数组可以包含多个值。了解有关地点类型的更多信息。
  • fullJSON包含从Places API收到的完整JSON响应。可用于提取额外信息。更多信息请参见Places Autocomplete API文档

但是，您可以通过调用以下方法获取更多信息，例如coordinates和bounds

await myPlace.geolocation;

示例

这是该小部件使用示例

return SearchMapPlaceWidget(
    apiKey: YOUR_API_KEY,
    // The language of the autocompletion
    language: 'en',
    // The position used to give better recomendations. In this case we are using the user position
    location: userPosition.coordinates,
    radius: 30000,
    onSelected: (Place place) async {
        final geolocation = await place.geolocation;

        // Will animate the GoogleMap camera, taking us to the selected position with an appropriate zoom
        final GoogleMapController controller = await _mapController.future;
        controller.animateCamera(CameraUpdate.newLatLng(geolocation.coordinates));
        controller.animateCamera(CameraUpdate.newLatLngBounds(geolocation.bounds, 0));
    },
);

未来实现

此包可以添加许多功能。以下是一些我想实现（或其他人可以实现）的功能：

  • [ ]使小部件更具可定制性
  • [ ]使此包独立于google_maps_flutter
  • [ ]允许用户通过点击小部件外部来关闭它
  • [ ]为纵向方向的手机或可折叠设备提供合适的小部件尺寸。

GitHub

https://github.com/Bernardi23/search_map_place