添加可拖动标记到flutter应用程序Map框

cbjzeqam  于 2023-06-30  发布在  Flutter
关注(0)|答案(1)|浏览(124)

我正在使用mapbox_maps_flutter构建flutter应用程序:0.4.4包。没有官方的flutter文档,所以我只是使用示例和android API来解决问题。但我试图实现的是在我的Map上有一个自定义标记图标,最初与用户当前位置相同,然后每当我在Map上拖动滚动时,标记就会移动(通过相机的中心点)。如果这太复杂,那么我只希望标记是可拖动的(就像优步应用程序,当你请求一次旅行)。
我不介意被指向一些flutter文档,或者至少是一个关于如何使用标记的好的和详细的例子。
最后,请注意,我使用的版本0.44不再与mapbox_gl兼容,我相信。
下面是一些相关代码:

MapboxMap? mapboxMap;

_onMapCreated(MapboxMap mapboxMap) async {
    this.mapboxMap = mapboxMap;
    mapboxMap.location
        .updateSettings(LocationComponentSettings(enabled: true)); // show current position
    mapboxMap.scaleBar.updateSettings(ScaleBarSettings(
      enabled: false,)); // hide the scale bar
    mapboxMap.compass.updateSettings(CompassSettings(
      enabled: false,)); // hide the compass
  }

Widget _map() {
    return SizedBox(
      height: MediaQuery.of(context).size.height * 0.8, //mapbox needs to have a height
      child: MapWidget(
          resourceOptions: ResourceOptions(accessToken: MAPBOX_ACCESS_TOKEN),
        onMapCreated: _onMapCreated,
        key: const ValueKey("mapWidget"),
        cameraOptions: CameraOptions(
            center: Point(
                coordinates: Position(
                  widget.location.longitude,
                  widget.location.latitude,
                )).toJson(),
            zoom: 17.5
        ),
      )
    );
  }
qyswt5oh

qyswt5oh1#

我想明白了如前所述,mapbox_maps_flutter:0.4.4目前与mapbox_gl不兼容。添加custom_marker的方法是将点注解与注解管理器结合使用。
下面是设置的样子:

MapboxMap? mapboxMap;
    PointAnnotationManager? pointAnnotationManager;
    PointAnnotation? pointAnnotation;
    
    _onMapCreated(MapboxMap mapboxMap) async {
        this.mapboxMap = mapboxMap;
        mapboxMap.annotations.createPointAnnotationManager().then((value) async {
          pointAnnotationManager = value;
          _createMarker();
        });
      }

Future<void> _createMarker({double currentLat = 0, double currentLong = 0, }) async {
    final ByteData bytes =
    await rootBundle.load('assets/images/marker.png');
    final Uint8List list = bytes.buffer.asUint8List();

    pointAnnotationManager
        ?.create(PointAnnotationOptions(
        geometry: Point(
            coordinates: Position(
              currentLong == 0
                  ? widget.postLongitude != 0 ? widget.postLongitude : widget.location.longitude
                  : currentLong,
              currentLat == 0
                  ? widget.postLatitude != 0 ? widget.postLatitude : widget.location.latitude
                  : currentLat,
            )).toJson(),
        iconSize: 2.5,
        iconOffset: [0.0, -10.0],
        symbolSortKey: 10,
        image: list))
        .then((value) => pointAnnotation = value);
  }

以上是如何创建标记并将其放置在任意初始gps位置。下面显示了当您在Map上拖动滚动或单击Map内的任何位置时如何移动标记:

Widget _map() {
    return SizedBox(
      height: MediaQuery.of(context).size.height * 0.8, //mapbox needs to have a height
      child: MapWidget(
          resourceOptions: ResourceOptions(accessToken: MAPBOX_ACCESS_TOKEN),
        onMapCreated: _onMapCreated,
        key: const ValueKey("mapWidget"),
        onScrollListener: (screenCoordinate) {
          pointAnnotationManager?.deleteAll();
          _createMarker(currentLat: screenCoordinate.x, currentLong: screenCoordinate.y);
        },
        onTapListener: (screenCoordinate) async {
          pointAnnotationManager?.deleteAll();
          _createMarker(currentLat: screenCoordinate.x, currentLong: screenCoordinate.y);
          setState(()  {});
        },
      )
    );
  }

相关问题