zoom in/out 不可能:总是关注我的位置 flutter
zoom in/out not possible: always focus on my position flutter
我刚开始学习 flutter,我正在尝试使用 google 地图构建一个移动应用程序。
我正在学习一个教程,该教程正在构建一个始终跟踪我的位置的应用程序:
它工作得很好,问题是每当我尝试缩放时 in/out 它会带我回到默认缩放 的位置,即使我没有移动.
我正在尝试能够缩放 in/out 即使我正在移动并且仅当我单击按钮时才将我带回我的位置。
这里是源代码:
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Maps',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Map Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
StreamSubscription _locationSubscription;
Location _locationTracker = Location();
Marker marker;
Circle circle;
GoogleMapController _controller;
static final CameraPosition initialLocation = CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 14.4746,
);
Future<Uint8List> getMarker() async {
ByteData byteData = await DefaultAssetBundle.of(context).load("assets/car_icon.png");
return byteData.buffer.asUint8List();
}
void updateMarkerAndCircle(LocationData newLocalData, Uint8List imageData) {
LatLng latlng = LatLng(newLocalData.latitude, newLocalData.longitude);
this.setState(() {
marker = Marker(
markerId: MarkerId("home"),
position: latlng,
rotation: newLocalData.heading,
draggable: false,
zIndex: 2,
flat: true,
anchor: Offset(0.5, 0.5),
icon: BitmapDescriptor.fromBytes(imageData));
circle = Circle(
circleId: CircleId("car"),
radius: newLocalData.accuracy,
zIndex: 1,
strokeColor: Colors.blue,
center: latlng,
fillColor: Colors.blue.withAlpha(70));
});
}
void getCurrentLocation() async {
try {
Uint8List imageData = await getMarker();
var location = await _locationTracker.getLocation();
updateMarkerAndCircle(location, imageData);
if (_locationSubscription != null) {
_locationSubscription.cancel();
}
_locationSubscription = _locationTracker.onLocationChanged().listen((newLocalData) {
if (_controller != null) {
_controller.animateCamera(CameraUpdate.newCameraPosition(new CameraPosition(
bearing: 192.8334901395799,
target: LatLng(newLocalData.latitude, newLocalData.longitude),
tilt: 0,
zoom: 18.00)));
updateMarkerAndCircle(newLocalData, imageData);
}
});
} on PlatformException catch (e) {
if (e.code == 'PERMISSION_DENIED') {
debugPrint("Permission Denied");
}
}
}
@override
void dispose() {
if (_locationSubscription != null) {
_locationSubscription.cancel();
}
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: initialLocation,
markers: Set.of((marker != null) ? [marker] : []),
circles: Set.of((circle != null) ? [circle] : []),
onMapCreated: (GoogleMapController controller) {
_controller = controller;
},
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.location_searching),
onPressed: () {
getCurrentLocation();
}),
);
}
}
请大家帮帮我!
谢谢
你可以试试这个
声明一个变量,在您的位置发生变化时保持您的位置
Map _position;
在你的位置改变监听器
_locationSubscription = _locationTracker.onLocationChanged().listen((newLocalData) {
setState(() {
_position = {
"lat": newLocalData.latitude,
"lng": newLocalData.longitude,
"heading": newLocalData.heading,
};
});
if (_controller != null) updateMarkerAndCircle(newLocalData, imageData);
});
最后,每次要将地图居中到当前位置时调用此方法
void _gotoCurrentPosition() {
if (null != _controller && null != _position) {
_controller.animateCamera(CameraUpdate.newCameraPosition(new CameraPosition(
bearing: _position["heading"],
target: LatLng(_position["lat"], _position["lng"]),
tilt: 0,
zoom: 18.00),
),);
}
}
我们的想法是您的应用程序专注于您的位置,当您尝试覆盖某个操作时,它将继续专注于专注于您的位置的第一感觉。你必须分离你的方法,这样当你的应用程序关注你的位置时,你仍然可以通过重写第一个方法 onTap 或 onCameraMove 来取消焦点。
_locationSubscription = _locationTracker.onLocationChanged().listen((newLocalData) {
if (_controller != null) {
_controller.animateCamera(CameraUpdate.newCameraPosition(new CameraPosition(
bearing: 192.8334901395799,
target: LatLng(newLocalData.latitude, newLocalData.longitude),
tilt: 0,
zoom: 18.00)));
updateMarkerAndCircle(newLocalData, imageData);
}
});
这就是为什么在您尝试移动地图时地图会将您带回您的位置的原因,因为相机总是动画到您的位置
我刚开始学习 flutter,我正在尝试使用 google 地图构建一个移动应用程序。 我正在学习一个教程,该教程正在构建一个始终跟踪我的位置的应用程序:
它工作得很好,问题是每当我尝试缩放时 in/out 它会带我回到默认缩放 的位置,即使我没有移动.
我正在尝试能够缩放 in/out 即使我正在移动并且仅当我单击按钮时才将我带回我的位置。
这里是源代码:
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Maps',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Map Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
StreamSubscription _locationSubscription;
Location _locationTracker = Location();
Marker marker;
Circle circle;
GoogleMapController _controller;
static final CameraPosition initialLocation = CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 14.4746,
);
Future<Uint8List> getMarker() async {
ByteData byteData = await DefaultAssetBundle.of(context).load("assets/car_icon.png");
return byteData.buffer.asUint8List();
}
void updateMarkerAndCircle(LocationData newLocalData, Uint8List imageData) {
LatLng latlng = LatLng(newLocalData.latitude, newLocalData.longitude);
this.setState(() {
marker = Marker(
markerId: MarkerId("home"),
position: latlng,
rotation: newLocalData.heading,
draggable: false,
zIndex: 2,
flat: true,
anchor: Offset(0.5, 0.5),
icon: BitmapDescriptor.fromBytes(imageData));
circle = Circle(
circleId: CircleId("car"),
radius: newLocalData.accuracy,
zIndex: 1,
strokeColor: Colors.blue,
center: latlng,
fillColor: Colors.blue.withAlpha(70));
});
}
void getCurrentLocation() async {
try {
Uint8List imageData = await getMarker();
var location = await _locationTracker.getLocation();
updateMarkerAndCircle(location, imageData);
if (_locationSubscription != null) {
_locationSubscription.cancel();
}
_locationSubscription = _locationTracker.onLocationChanged().listen((newLocalData) {
if (_controller != null) {
_controller.animateCamera(CameraUpdate.newCameraPosition(new CameraPosition(
bearing: 192.8334901395799,
target: LatLng(newLocalData.latitude, newLocalData.longitude),
tilt: 0,
zoom: 18.00)));
updateMarkerAndCircle(newLocalData, imageData);
}
});
} on PlatformException catch (e) {
if (e.code == 'PERMISSION_DENIED') {
debugPrint("Permission Denied");
}
}
}
@override
void dispose() {
if (_locationSubscription != null) {
_locationSubscription.cancel();
}
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: initialLocation,
markers: Set.of((marker != null) ? [marker] : []),
circles: Set.of((circle != null) ? [circle] : []),
onMapCreated: (GoogleMapController controller) {
_controller = controller;
},
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.location_searching),
onPressed: () {
getCurrentLocation();
}),
);
}
}
请大家帮帮我! 谢谢
你可以试试这个
声明一个变量,在您的位置发生变化时保持您的位置
Map _position;
在你的位置改变监听器
_locationSubscription = _locationTracker.onLocationChanged().listen((newLocalData) {
setState(() {
_position = {
"lat": newLocalData.latitude,
"lng": newLocalData.longitude,
"heading": newLocalData.heading,
};
});
if (_controller != null) updateMarkerAndCircle(newLocalData, imageData);
});
最后,每次要将地图居中到当前位置时调用此方法
void _gotoCurrentPosition() {
if (null != _controller && null != _position) {
_controller.animateCamera(CameraUpdate.newCameraPosition(new CameraPosition(
bearing: _position["heading"],
target: LatLng(_position["lat"], _position["lng"]),
tilt: 0,
zoom: 18.00),
),);
}
}
我们的想法是您的应用程序专注于您的位置,当您尝试覆盖某个操作时,它将继续专注于专注于您的位置的第一感觉。你必须分离你的方法,这样当你的应用程序关注你的位置时,你仍然可以通过重写第一个方法 onTap 或 onCameraMove 来取消焦点。
_locationSubscription = _locationTracker.onLocationChanged().listen((newLocalData) {
if (_controller != null) {
_controller.animateCamera(CameraUpdate.newCameraPosition(new CameraPosition(
bearing: 192.8334901395799,
target: LatLng(newLocalData.latitude, newLocalData.longitude),
tilt: 0,
zoom: 18.00)));
updateMarkerAndCircle(newLocalData, imageData);
}
});
这就是为什么在您尝试移动地图时地图会将您带回您的位置的原因,因为相机总是动画到您的位置