Flutter - 拖动标记并获得新位置

El *_*bre 8 google-maps geolocation dart flutter

在 Flutter 中,我有一张地图,可以在location 的帮助下获取设备 位置。然后我使用这个位置在谷歌地图 Flutter插件的帮助下在谷歌地图中显示标记。

代码类似于

 child: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: CameraPosition(
          target: LatLng(lat, lng),
          zoom: 5,
        ),
        markers: Set<Marker>.of(
          <Marker>[
            Marker(
              draggable: true,
              markerId: MarkerId("1"),
              position: LatLng(lat, lng),
              icon: BitmapDescriptor.defaultMarker,
              infoWindow: const InfoWindow(
                title: 'Usted está aquí',
              ),
            )
          ],
        ),
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
      ))
Run Code Online (Sandbox Code Playgroud)

如果位置插件失败或获取错误数据,我需要选择重新定位此标记。我使用draggable: true拖动标记,但我需要采用新的纬度和经度将其保存在数据库中。

所以问题是:使用可拖动我怎样才能获得新的纬度和经度?

dcg*_*dcg 19

如果你允许我,我会建议一个不同的方法来解决这个问题。我认为在当前版本的 Flutter (0.4.0) 谷歌地图中,​​你没有办法在拖动标记后获取新位置,所以我的解决方案是使用相机位置移动标记然后使用当前相机位置以获取新坐标。所以在你的代码中,你可以做这样的事情:

    child: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: CameraPosition(
          target: LatLng(lat, lng),
          zoom: 5,
        ),
        markers: Set<Marker>.of(
          <Marker>[
            Marker(
              draggable: true,
              markerId: MarkerId("1"),
              position: LatLng(lat, lng),
              icon: BitmapDescriptor.defaultMarker,
              infoWindow: const InfoWindow(
                title: 'Usted está aquí',
              ),
            )
          ],
        ),
        onCameraMove: ((_position) => _updatePosition(_position)),            
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
      ))
Run Code Online (Sandbox Code Playgroud)

然后,您可以在每次用户移动相机时设置标记的新状态,并将此坐标用于您需要的任何其他目的:

void _updatePosition(CameraPosition _position) {
    Position newMarkerPosition = Position(
        latitude: _position.target.latitude,
        longitude: _position.target.longitude);
    Marker marker = markers["1"];

    setState(() {
      markers["1"] = marker.copyWith(
          positionParam: LatLng(newMarkerPosition.latitude, newMarkerPosition.longitude));
    });
  }
Run Code Online (Sandbox Code Playgroud)

我希望它有帮助!

  • 我对这个答案投了赞成票,不仅因为它很好,还因为我正在学习西班牙语,而且我理解 InfoWindow 的标题:D 谢谢你让我的日子过得更好 (3认同)

MSA*_*ish 15

标记具有onDragEnd属性。使用onDragEnd属性给出新的纬度经度

Marker(
          onTap: () {
            print('Tapped');
          },
          draggable: true,
          markerId: MarkerId('Marker'),
          position: LatLng(value.latitude, value.longitude),
          onDragEnd: ((newPosition) {
            print(newPosition.latitude);
            print(newPosition.longitude);
          }))
Run Code Online (Sandbox Code Playgroud)