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

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

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

search_map_location 是一个用于通过名称搜索地理位置的文本搜索小部件。它有几个回调和自定义选项来处理地点搜索。

入门指南

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

dependencies:
    search_map_location: 0.0.6

之后,确保在您的 Google Cloud Platform 中激活以下 API:

  • Places

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

import 'package:search_map_location/search_map_location.dart';
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: SearchLocation(
        apiKey: // 您的谷歌地图API密钥
        onSelected: (Place place){
          print(place.description);
        },
      )
    )
  );
}

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

  • String apiKey 是唯一必需的属性。它是应用程序正在使用的Google Maps API密钥。
  • (Place) void onSelected 是用户选择自动完成选项时调用的回调函数。
  • (Place) void onSearch 是用户点击搜索图标时调用的回调函数。
  • String language 是用于自动补全的语言,默认为 ‘en’(英语)。检查Google Maps API支持的所有语言列表。
  • String country 可以允许搜索仅针对特定国家/地区。使用 country 时不要使用 locationradius 。使用ISO(使用alpha 2)代码表示国家名称。
  • LatLng location 是您希望检索位置信息的中心点。如果提供了此值,则必须提供 radius
  • int radius 是返回位置结果的距离(以米为单位)。请注意,设置半径会偏向于指示区域的结果,但可能不会完全限制在指定区域内。如果提供了此值,则必须提供 location
  • bool restrictBounds 将仅返回严格位于由 locationradius 定义的区域内的那些位置。
  • PlaceType placeType 将允许您按其类型过滤地点。有关可用类型的更多信息,请参阅支持的自动补全类型。默认情况下,不传递任何过滤器给请求,这意味着所有地点类型都会显示在自动补全中。

Place

这个类将在 onSelectedonSearch 方法中返回。它允许我们获取有关用户选择的位置的更多信息。

最初,它仅为您提供基本信息:

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

但是,您可以通过调用以下方法获取更多关于地点的信息,例如坐标和边界:

await place.geolocation;

示例

以下是使用 country 的小部件示例:

return SearchLocation(
    apiKey: YOUR_API_KEY,
    // 自动补全的语言
    language: 'en',
    // 仅对特定国家进行搜索
    country: 'BD',
    onSelected: (Place place) async {
        final geolocation = await place.geolocation;

        // 将动画GoogleMap相机,将我们带到选定的位置,并具有适当的缩放级别
        final GoogleMapController controller = await _mapController.future;
        controller.animateCamera(CameraUpdate.newLatLng(geolocation.coordinates));
        controller.animateCamera(CameraUpdate.newLatLngBounds(geolocation.bounds, 0));
    },
);

以下是使用 locationradius 的小部件示例:

return SearchLocation(
    apiKey: YOUR_API_KEY,
    // 自动补全的语言
    language: 'en',
    // location是地点的中心,提供的半径是在此半径范围内的地点搜索结果
    // 可以通过获取用户的纬度和经度动态设置此LatLng
    location: LatLng(latitude: 9.072264, longitude: 7.491302),
    radius: 1100,
    onSelected: (Place place) async {
        final geolocation = await place.geolocation;

        // 将动画GoogleMap相机,将我们带到选定的位置,并具有适当的缩放级别
        final GoogleMapController controller = await _mapController.future;
        controller.animateCamera(CameraUpdate.newLatLng(geolocation.coordinates));
        controller.animateCamera(CameraUpdate.newLatLngBounds(geolocation.bounds, 0));
    },
);

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用search_map_location插件的示例代码。这个插件允许用户在地图上搜索位置并获取相关信息。

首先,你需要在pubspec.yaml文件中添加依赖项:

dependencies:
  flutter:
    sdk: flutter
  search_map_location: ^最新版本号  # 请替换为当前最新版本号

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

接下来,在你的Flutter项目中,你可以按照以下步骤使用search_map_location插件:

  1. 导入必要的包
import 'package:flutter/material.dart';
import 'package:search_map_location/search_map_location.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
  1. 定义地图控制器和搜索控制器
class _MyHomePageState extends State<MyHomePage> {
  Completer<GoogleMapController> _controller = Completer();
  SearchMapLocationController _searchController = SearchMapLocationController();
  LatLng _initialPosition = LatLng(0, 0);
  List<Place> _places = [];

  @override
  void initState() {
    super.initState();
    _getCurrentLocation();
    _searchController.searchResultStream.listen((places) {
      setState(() {
        _places = places;
      });
    });
  }

  Future<void> _getCurrentLocation() async {
    bool serviceEnabled;
    LocationPermission permission;

    serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      return Future.error('Location services are disabled.');
    }

    permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        return Future.error('Location permissions are denied');
      }
    }

    if (permission == LocationPermission.deniedForever) {
      return Future.error(
          'Location permissions are permanently denied, we cannot request permissions.');
    }

    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
    LatLng latLng = LatLng(position.latitude, position.longitude);

    setState(() {
      _initialPosition = latLng;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Location Search'),
      ),
      body: Stack(
        children: [
          GoogleMap(
            mapType: MapType.hybrid,
            initialCameraPosition: CameraPosition(
              target: _initialPosition,
              zoom: 14.0,
            ),
            onMapCreated: (GoogleMapController controller) {
              _controller.complete(controller);
              _searchController.setMapId(controller.mapId);
            },
            markers: Set<Marker>.of(_places.map((place) {
              return Marker(
                markerId: MarkerId(place.placeId),
                position: LatLng(place.latitude, place.longitude),
                infoWindow: InfoWindow(title: place.name, snippet: place.vicinity),
              );
            })),
          ),
          Positioned(
            bottom: 10,
            left: 10,
            child: TextField(
              controller: _searchController.textFieldController,
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(),
                labelText: 'Search Location',
              ),
              onEditingComplete: () async {
                await _searchController.searchLocation();
              },
            ),
          ),
        ],
      ),
    );
  }
}
  1. 定义主函数和主页面
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map Location Search Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

这个示例展示了如何使用search_map_location插件来在地图上搜索位置。注意,这个插件依赖于geolocator来获取当前位置,并依赖于google_maps_flutter来显示地图。

请确保你已经正确配置了Google Maps API密钥,并已经在Android和iOS项目中进行了必要的设置。

这个示例代码应该能帮助你快速上手search_map_location插件的使用。如果有任何问题或需要进一步的定制,请查阅该插件的官方文档。

回到顶部