Flutter Google Maps - 将相机移动到当前位置
Posted
技术标签:
【中文标题】Flutter Google Maps - 将相机移动到当前位置【英文标题】：Flutter Google Maps - Move camera to current position 【发布时间】：2021-10-09 22:56:22 【问题描述】：在我的 Flutter 项目中，我使用 Google Maps 插件在应用程序中显示地图。在地图上，我想显示用户的当前位置，为此我使用 Geolocator。
当地图加载时，它将加载到一个静态点，当用户拒绝位置权限时，用户仍然可以在没有位置的情况下使用地图。当用户接受我想要将相机移动到用户当前位置的权限时。
我已经在下面的代码中实现了上述功能，但我也收到以下错误，我不知道如何解决它。
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'dart:typed_data';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:geolocator/geolocator.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:hvd_test/styling/colors.dart';
import 'package:hvd_test/models/navigation.dart';
import 'package:hvd_test/models/markers.dart';
// This page shows a Google Map plugin with all stations (HvD and Total). The markers are pulled from a Firebase database.
class StationsMap extends StatefulWidget
@override
_StationsMap createState() => _StationsMap();
class _StationsMap extends State<StationsMap>
bool _isLocationGranted = false;
var currentLocation;
GoogleMapController mapController;
Map<MarkerId, Marker> markers = <MarkerId, Marker>;
// Below function initiates all HvD stations and shows them as markers on the map. It also generates a Bottom Sheet for each location with corresponding information.
void initMarkerHvD(specify, specifyId) async
var markerIdVal = specifyId;
final Uint8List markerHvD =
await getBytesFromAsset('images/Pin-HvD.JPG', 70);
final MarkerId markerId = MarkerId(markerIdVal);
final Marker marker = Marker(
markerId: markerId,
onTap: ()
showModalBottomSheet(
context: context,
builder: (context) => SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(20.0),
topRight: const Radius.circular(20.0))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
specify['stationName'],
style: TextStyle(
color: PaletteBlue.hvdblue,
fontWeight: FontWeight.bold,
fontSize: 16),
textAlign: TextAlign.center,
),
SizedBox(height: 10),
Text(specify['stationAddress']),
Text(specify['stationZIP'] +
' ' +
specify['stationCity']),
SizedBox(height: 20),
ElevatedButton(
child: Text(
'Navigeer naar locatie',
style: TextStyle(
color: Colors.white,
),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
PaletteOrange.hvdorange)),
onPressed: ()
MapUtils.openMap(
specify['stationLocation'].latitude,
specify['stationLocation'].longitude);
),
],
),
),
),
),
));
,
position: LatLng(specify['stationLocation'].latitude,
specify['stationLocation'].longitude),
infoWindow: InfoWindow(),
icon: BitmapDescriptor.fromBytes(markerHvD),
);
setState(()
markers[markerId] = marker;
);
// Below function initiates all Total stations and shows them as markers on the map. It also generates a Bottom Sheet for each location with corresponding information.
void initMarkerTotal(specify, specifyId) async
var markerIdVal = specifyId;
final Uint8List markerTotal =
await getBytesFromAsset('images/Pin-Total.JPG', 70);
final MarkerId markerId = MarkerId(markerIdVal);
final Marker marker = Marker(
markerId: markerId,
onTap: ()
showModalBottomSheet(
context: context,
builder: (context) => SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(20.0),
topRight: const Radius.circular(20.0))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
specify['stationName'],
style: TextStyle(
color: PaletteBlue.hvdblue,
fontWeight: FontWeight.bold,
fontSize: 16),
textAlign: TextAlign.center,
),
SizedBox(height: 10),
Text(specify['stationAddress']),
Text(specify['stationZIP'] +
' ' +
specify['stationCity']),
SizedBox(height: 20),
ElevatedButton(
child: Text(
'Navigeer naar locatie',
style: TextStyle(
color: Colors.white,
),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
PaletteOrange.hvdorange)),
onPressed: ()
MapUtils.openMap(
specify['stationLocation'].latitude,
specify['stationLocation'].longitude);
),
],
),
),
),
),
));
,
position: LatLng(specify['stationLocation'].latitude,
specify['stationLocation'].longitude),
infoWindow: InfoWindow(),
icon: BitmapDescriptor.fromBytes(markerTotal),
);
setState(()
markers[markerId] = marker;
);
// Below functions pulls all HvD markers from the database.
getMarkerDataHvD() async
FirebaseFirestore.instance
.collection('hvd-stations')
.get()
.then((myMarkers)
if (myMarkers.docs.isNotEmpty)
for (int i = 0; i < myMarkers.docs.length; i++)
initMarkerHvD(myMarkers.docs[i].data(), myMarkers.docs[i].id);
);
// Below function pulls all Total markers from the database.
getMarkerDataTotal() async
FirebaseFirestore.instance
.collection('total-stations')
.get()
.then((myMarkers)
if (myMarkers.docs.isNotEmpty)
for (int i = 0; i < myMarkers.docs.length; i++)
initMarkerTotal(myMarkers.docs[i].data(), myMarkers.docs[i].id);
);
// Below function initiates all previous functions on the page. This happens when the user navigates to the page.
void initState()
getMarkerDataHvD();
getMarkerDataTotal();
super.initState();
Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high)
.then((currloc)
setState(()
currentLocation = currloc;
_isLocationGranted = true;
);
mapController.moveCamera(CameraUpdate.newLatLng(LatLng(currentLocation.latitude, currentLocation.longitude))) as CameraPosition;
);
CameraPosition _initialCameraPosition =
CameraPosition(target: const LatLng(51.9244201, 4.4777325), zoom: 12);
// Below function is used to display all previous functions to the page.
@override
Widget build(BuildContext context)
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
GoogleMap(
onMapCreated: onMapCreated,
markers: Set<Marker>.of(markers.values),
gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
new Factory<OneSequenceGestureRecognizer>(
() => new EagerGestureRecognizer(),
),
].toSet(),
mapToolbarEnabled: false,
zoomGesturesEnabled: true,
zoomControlsEnabled: false,
scrollGesturesEnabled: true,
myLocationEnabled: _isLocationGranted,
myLocationButtonEnabled: true,
initialCameraPosition: _initialCameraPosition,
),
],
),
),
);
onMapCreated(GoogleMapController controller)
mapController = controller;
我得到的错误是这样的：
E/flutter ( 7769): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: type 'Future<void>' is not a subtype of type 'CameraPosition' in type cast
E/flutter ( 7769): #0 _StationsMap.initState.<anonymous closure>
E/flutter ( 7769): #1 _rootRunUnary (dart:async/zone.dart:1362:47)
E/flutter ( 7769): #2 _CustomZone.runUnary (dart:async/zone.dart:1265:19)
E/flutter ( 7769): <asynchronous suspension>
有人可以帮帮我吗？
【问题讨论】：
as CameraPosition 正在尝试转换 moveCamera 本身不属于该类型的结果 - 为什么会出现这种情况？
昨晚很晚...我删除了“as CameraPosition”代码，现在它可以工作了！非常感谢！剩下要做的就是给它一个缩放参数，你知道我会把代码放在哪里吗？ @安迪
找到了！我为此使用了 CameraUpdate.newLatLngZoom。
【参考方案1】：
感谢@Andy，我解决了这个问题。我从代码中删除了“as CameraPosition”，然后该功能起作用了。我还使用以下方法实现了缩放：
mapController.animateCamera(CameraUpdate.newLatLngZoom(LatLng(currentLocation.latitude, currentLocation.longitude), 14));
【讨论】：
以上是关于Flutter Google Maps - 将相机移动到当前位置的主要内容，如果未能解决你的问题，请参考以下文章
将相机重定向到当前位置 Google Maps API v2
Flutter：如何将 mylocation 按钮放在 Google Maps 上的不同位置？
使相机随着位置的变化而移动（Google Maps Api）
Google Maps iOS：移动相机以显示集群内的所有标记