【问题标题】:zoom in/out not possible: always focus on my position flutter无法放大/缩小:始终专注于我的位置颤动
【发布时间】:2020-12-22 06:35:38
【问题描述】:

我刚开始学习颤振,我正在尝试使用谷歌地图构建一个移动应用程序。 我正在关注一个正在构建一个始终跟踪我的位置的应用程序的教程:

它工作得很好,问题是当我尝试放大/缩小时,即使我没有移动,它也会以默认缩放将我带回到我的位置

我试图能够放大/缩小 即使我正在移动并且只有在我点击按钮时才能将我收回我的位置

这里是源代码:

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();
          }),
    );
  }
}

请帮帮我! 谢谢。

【问题讨论】:

    标签: android flutter google-maps-api-3


    【解决方案1】:

    你可以试试这个
    声明一个变量,在您的位置变化时保持您的位置

    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),
           ),);
        }
    }
    

    【讨论】:

    • 如果我希望能够放大/缩小并且只有点击按钮才能获得我的位置,应该怎么做?
    【解决方案2】:

    这个想法是您的应用程序专注于您的位置,当您尝试覆盖某个操作时,它会继续专注于关注您的位置的第一个味道。您必须分离您的方法,因此当您的应用程序关注您的位置时,您仍然可以通过覆盖第一个方法 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);
        }
      });
    

    这就是为什么当您尝试移动地图时地图会将您带回您所在位置的原因,因为相机始终会动画到您的位置位置

    【讨论】:

      猜你喜欢
      • 2021-08-10
      • 2016-06-09
      • 2020-10-30
      • 1970-01-01
      • 2017-10-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多