【问题标题】:Flutter - Drag marker and get new positionFlutter - 拖动标记并获得新位置
【发布时间】:2019-07-26 22:37:01
【问题描述】:

在 Flutter 中,我有一张在 location 的帮助下获取设备位置的地图。然后我在Google Maps 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;
        },
      ))

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

所以问题是:使用可拖动的如何获得新的经纬度?

【问题讨论】:

    标签: google-maps flutter dart geolocation


    【解决方案1】:

    如果您允许,我会建议用不同的方法来解决这个问题。我认为在 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;
            },
          ))
    

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

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

    希望对你有帮助!

    【讨论】:

    • 当我按下并拖动不移动标记,移动地图,所以不正是我想要的。
    • 确实,这个解决方案会随着地图相机一起移动标记。与直接拖动标记的用户体验不同,但结果应该是一样的。
    • 这对我有用。我使用的是^0.5.19+2 版本,我只需要在_updatePosition 中更改这一行,即,而不是copyWith,我正在删除该标记并再次添加新的Lat Lng,它会产生所需的拖动效果。 var m = markers.firstWhere( (p) =&gt; p.markerId == MarkerId('1'), orElse: () =&gt; null); _markers.remove(m); _markers.add( Marker( markerId: MarkerId('1'), position: LatLng(_p.target.latitude, _p.target.longitude), draggable: true, ), ); setState(() {});
    • 我放弃了这个答案,不仅因为它很好,而且因为我正在学习西班牙语并且我理解了 InfoWindow 的标题:D 谢谢你让我的一天变得更好
    • 这更好,因为当你第一次拿起它时,大头针会移动很多。最好只是滑动地图。无需使图钉可拖动。
    【解决方案2】:

    标记具有 onDragEnd 属性。使用 onDragEnd 属性给出新的 latitudelongitude

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

    【讨论】:

    • 如何获取地址?
    • @MasterpieceMasIcang onDragEnd 属性将为标记提供新位置。
    • 你能告诉我完整的代码吗,因为 onDragEnd 在我的情况下没有返回任何值
    • 使用 github gist 链接或其他方式在此处添加您的代码?
    • @OsamaMohammed 您需要传递位置参数的值,以便在 Google 地图中定位标记。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-08-31
    • 2018-06-01
    • 2017-09-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-21
    相关资源
    最近更新 更多