我正在使用map_view插件在Fluter应用中构建地图。我按照示例进行操作,但是我想将地图初始化为用户当前位置,而无需对坐标进行硬编码。
我一直在研究文档和Github问题,发现this,但我不知道如何应用它。
地图通过以下方式初始化:
mapView.show(
new MapOptions(
mapViewType: MapViewType.normal,
showUserLocation: true,
initialCameraPosition: new CameraPosition(
new Location(45.5235258, -122.6732493), 14.0),
title: "Recently Visited"),
toolbarActions: [new ToolbarAction("Close", 1)]);
在地图准备好时获得通知
如何使用此代码设置地图的位置?
mapView.onLocationUpdated.listen((location) => myUserLocation = location);
这是我的全部代码:
Location myUserLocation = null;
class NuMapView extends StatefulWidget {
@override
_NuMapViewState createState() => new _NuMapViewState();
}
class _NuMapViewState extends State<NuMapView> {
static String apiKey = "mykey";
MapView mapView;
CameraPosition cameraPosition;
var compositeSubscription = new CompositeSubscription();
var staticMapProvider = new StaticMapProvider(apiKey);
Uri staticMapUri;
@override
void initState(){
print("dentro init state\n");
mapView = new MapView();
mapView.onLocationUpdated.listen((location) {
print("cacchissime\n");
if (myUserLocation == null){
print("user location non null\n");
myUserLocation = location;
showMap();
}
else {
print("user location è nullo!!\n");
}
} );
super.initState();
}
bool ready = false;
List<Marker> _markers = new List<Marker>();
});
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
body: new Text("ciao")
),
);
}
showMap() {
mapView.show(
new MapOptions(
mapViewType: MapViewType.normal,
showUserLocation: true,
showMyLocationButton: true,
showCompassButton: true,
initialCameraPosition: new CameraPosition(
new Location(myUserLocation.latitude, myUserLocation.longitude), 35.0),
hideToolbar: false,
title: "Cerca sulla mappa"),
);
StreamSubscription sub = mapView.onMapReady.listen((_) {
mapView.setMarkers(_markers);
});
compositeSubscription.add(sub);
sub = mapView.onLocationUpdated.listen((location) {
print("Location updated $location");
});
compositeSubscription.add(sub);
sub = mapView.onTouchAnnotation
.listen((annotation) => print("annotation ${annotation.id} tapped"));
compositeSubscription.add(sub);
sub = mapView.onCameraChanged.listen((cameraPosition) =>
this.setState(() => this.cameraPosition = cameraPosition));
compositeSubscription.add(sub);
}
答案 0 :(得分:3)
好的,根据您发布的信息,您可以执行以下操作:
//state class variable
Location myUserLocation;
@override
void initState() {
mapView.onLocationUpdated.listen((location) {
if (myUserLocation == null){
myUserLocation = location;
_loadMap();
}
} );
super.initState();
}
_loadMap(){
mapView.show(
new MapOptions(
mapViewType: MapViewType.normal,
showUserLocation: true,
initialCameraPosition: new CameraPosition(
new Location(myUserLocation.latitude, myUserLocation.longitude), 14.0),
title: "Recently Visited"),
toolbarActions: [new ToolbarAction("Close", 1)]);
}
首先,在initState
之后,您可以获取当前位置并使用您的位置调用showMap。
答案 1 :(得分:1)
您需要的这段代码(我已经显示了完整的代码,因此您可以直接尝试):
请注意,在运行此代码之前,您需要先安装google_maps_flutter,location和permission软件包才能进行工程设计。
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:permission/permission.dart';
void main() => runApp(TestMap());
class TestMap extends StatefulWidget {
@override
_TestMapState createState() => _TestMapState();
}
class _TestMapState extends State<TestMap> {
@override
Widget build(BuildContext context) {
//To Require Permission
Permission.openSettings;
return MaterialApp(
title: 'Flutter Google Maps Demo',
home: MapSample(),
);
}
}
class MapSample extends StatefulWidget {
@override
State<MapSample> createState() => MapSampleState();
}
class MapSampleState extends State<MapSample> {
Map<PolylineId, Polyline> _mapPolylines = {};
int _polylineIdCounter = 1;
static double latitude_current = 31.9414246;
static double longitude_current = 35.8880857;
void _GetDeviceLocation() async {
var location = new Location();
location.changeSettings(
accuracy: LocationAccuracy.HIGH,
distanceFilter: 0,
interval: 100,
);
location.onLocationChanged().listen((LocationData currentLocation) {
latitude_current = currentLocation.latitude;
longitude_current = currentLocation.longitude;
_goToTheLake();
});
}
Completer<GoogleMapController> _controller = Completer();
static final CameraPosition _kLake = CameraPosition(
bearing: 60.8334901395799,
target: LatLng(latitude_current, longitude_current),
tilt: 80.440717697143555,
zoom: 18.151926040649414);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("Maps"),
actions: <Widget>[IconButton(icon: Icon(Icons.add), onPressed: _GetDeviceLocation)],
),
body: GoogleMap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
target: LatLng(latitude_current, longitude_current),
zoom: 14.4746,
),
onMapCreated: (GoogleMapController controller) async {
_GetDeviceLocation();
_controller.complete(controller);
},
myLocationEnabled: true,
polylines: Set<Polyline>.of(_mapPolylines.values),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: _goToTheLake,
label: Text('Drive Mode'),
icon: Icon(Icons.directions_boat),
),
);
}
Future<void> _goToTheLake() async {
_GetDeviceLocation();
final GoogleMapController controller = await _controller.future;
controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
}
}
答案 2 :(得分:0)
我找到了使用GeoLocator插件的解决方案... 试试这个代码。
_animateToUser() async {
Geolocator().getCurrentPosition().then((currloc){
setState(() {
currentLocation = currloc;
});
});
mapController.animateCamera(CameraUpdate.newCameraPosition(
CameraPosition(
target: LatLng(currentLocation.latitude, currentLocation.longitude),
zoom: 17.0,
)
)
);}
在Google地图部分...
Stack(
children: <Widget>[
GoogleMap(
initialCameraPosition:
CameraPosition(target: LatLng(currentLocation.latitude,
currentLocation.longitude), zoom: 17),
onMapCreated: _onMapCreated,
myLocationEnabled: true,
mapType: _currentMapType,
markers: Set<Marker>.of(markers.values),
),
希望比有所帮助!