Flutter 中带有地点自动完成功能的 Google 地图

问题描述

我是 Flutter 新手，试图为 Valet 创建跟踪应用程序，我想要一张带有自动完成搜索视图的地图我在 youtube 和 github 上应用了许多视频，但没有任何效果，有什么问题我没有得到结果。这是我的代码：

import 'package:Flutter/material.dart';
import 'package:Flutter_app4/directions_repository.dart';
import 'package:Flutter_app4/models/directions.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_Flutter/google_maps_Flutter.dart';
import 'package:location/location.dart';
import 'package:search_map_place/search_map_place.dart';
import '../components/MyDrawer.dart';
import 'package:geolocator/geolocator.dart';

class Categories extends StatefulWidget {
  State<StatefulWidget> createState() {
    return Categoriesstate();
  }
}

class Categoriesstate extends State<Categories> {


  GoogleMapController _googleMapController;
  Marker _origin;
  Marker _destination;
  Directions _info;

  final Geolocator geolocator = Geolocator();

  LatLng _initialcameraposition = LatLng(20.5937,78.9629);
  Location _location = Location();


  @override
  void dispose() {
    _googleMapController.dispose();
    super.dispose();
  }

  void _onMapCreated(GoogleMapController _cntlr)
  {
    _googleMapController = _cntlr;
    _location.onLocationChanged.listen((l) {
      _googleMapController.animateCamera(
        CameraUpdate.newCameraPosition(
          CameraPosition(target: LatLng(l.latitude,l.longitude),zoom: 12),),);
    });
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
  appBar: AppBar(
    centerTitle: false,title: const Text('Google Map'),actions: [
      
    ],body: Stack(
    alignment: Alignment.center,children: [


      GoogleMap(
        onMapCreated: _onMapCreated,initialCameraPosition: CameraPosition(target: _initialcameraposition),myLocationEnabled: true,// onMapCreated: (controller) => _googleMapController = controller,markers: {
          if (_origin != null) _origin,if (_destination != null) _destination
        },polylines: {
          if (_info != null)
            polyline(
              polylineId:  polylineId('overview_polyline'),color: Colors.red,width: 5,points: _info.polylinePoints
                  .map((e) => LatLng(e.latitude,e.longitude))
                  .toList(),},onLongPress: _addMarker,if (_info != null)
        Positioned(
          top: 20.0,child: Container(
            padding: const EdgeInsets.symmetric(
              vertical: 6.0,horizontal: 12.0,decoration: Boxdecoration(
              color: Colors.yellowAccent,borderRadius: BorderRadius.circular(20.0),BoxShadow: const [
                BoxShadow(
                  color: Colors.black26,offset: Offset(0,2),blurRadius: 6.0,)
              ],child: Text(
              '${_info.totaldistance},${_info.totalDuration}',style: const TextStyle(
                fontSize: 18.0,fontWeight: FontWeight.w600,SearchMapPlaceWidget(
        placeholder: "Search Location",placeType: PlaceType.address,hasClearButton: true,apiKey: "AIzaSyB28v9ORJI5fArzzpAkMsBK6Jejyp3RnWE",onSelected: (Place place) async{
          Geolocation geolocator = await place.geolocation;
          _googleMapController.animateCamera(
              CameraUpdate.newLatLng(geolocator.coordinates)
          );
          _googleMapController.animateCamera(
              CameraUpdate.newLatLngBounds(geolocator.bounds,0)
          );

        },Container(
        margin: EdgeInsets.only(top: 20),child: Column(
          children: <Widget>[
           
          ],)
    ],floatingActionButton: FloatingActionButton(
    backgroundColor: Theme.of(context).primaryColor,foregroundColor: Colors.black,onpressed: () => _googleMapController.animateCamera(
      _info != null
          ? CameraUpdate.newLatLngBounds(_info.bounds,100.0)
          : CameraUpdate.newCameraPosition(null),child: const Icon(Icons.center_focus_strong),);
  }

  void _addMarker(LatLng pos) async {
if (_origin == null || (_origin != null && _destination != null)) {
  // Origin is not set OR Origin/Destination are both set
  // Set origin
  setState(() {
    _origin = Marker(
      markerId: MarkerId('origin'),infoWindow: const InfoWindow(title: 'Origin'),icon:
          BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen),position: pos,);
    // Reset destination
    _destination = null;

    // Reset info
    _info = null;
  });
} else {
  // Origin is already set
  // Set destination
  setState(() {
    _destination = Marker(
      markerId:  MarkerId('destination'),infoWindow: const InfoWindow(title: 'Destination'),icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),);
  });

  // Get directions
  final directions = await DirectionsRepository()
      .getDirections(origin: _origin.position,destination: pos);
  setState(() => _info = directions);
}
  }
}

这里是我使用的依赖项：

cupertino_icons: ^1.0.2
carousel_pro: ^1.0.0
Flutter_polyline_points:
google_maps_Flutter: ^0.5.13
search_map_place: ^0.3.0
geocoder: ^0.2.1
location: ^3.0.2
provider: ^4.3.3
http: ^0.12.2
geolocator: ^6.2.0
dio:

我添加了这些 API 限制： （Android 地图 SDK - iOS 版地图 SDK - 地点 API）。两点之间的方向也不好使我认为有一个丢失的环，请帮助

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）