Question

我试图找到将MapBox与Flutter和UiKitView / AndroidView结合使用的最佳方法。

我已经成功设置了一个UiKitView，该Map加载了带有注释和折线的MapBox，但是尝试使用MapBox允许的某些手势，例如点击注释以显示标注或通过使用long在地图上放置注释按手势不起作用。在应用程序运行时，我看不到任何错误或任何东西，因此很难判断出什么地方出了问题或只是什么都没做。

某些手势确实可以进行工作，例如平移地图或双击以放大，但我想从MapBox中获得全部或至少大部分功能。我也尝试过为UiKitView返回一个普通的UIView并传递手势，但是我也没有运气，所以我认为我没有正确处理手势。

下面是UiKitView实现

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Map App'),
        ),
        body: Container(
          child: Center(
              child: SizedBox(
                  height: double.infinity, width: double.infinity, child: MapBoxUIKitView())
              ),
        ),
      ),
    );
  }
}

class MapBoxUIKitView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MapBoxUIKitViewState();
  }
}

class MapBoxUIKitViewState extends State<MapBoxUIKitView> {
  @override
  Widget build(BuildContext context) {
    return UiKitView(
      viewType: "com.mapapp/mapbox_uikitview",
      gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
        new Factory<OneSequenceGestureRecognizer>(
            () => new EagerGestureRecognizer())
      ].toSet(),
    );
  }
}

下面是AppDelegate.swift

import UIKit
import Flutter
import Mapbox

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    let mapBoxViewFactory = MapBoxViewFactory()
    registrar(forPlugin: "MapApp").register(mapBoxViewFactory, withId: "com.mapapp/mapbox_uikitview")

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

public class MapBoxViewFactory : NSObject, FlutterPlatformViewFactory {
    public func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?) -> FlutterPlatformView {
        return MapBoxView(frame, viewId: viewId, args: args)
    }
}

public class MapBoxView : NSObject, FlutterPlatformView, MGLMapViewDelegate {
    let frame: CGRect
    let viewId: Int64
    var mapView: MGLMapView!

    init(_ frame: CGRect, viewId: Int64, args: Any?) {
        self.frame = frame
        self.viewId = viewId
    }

    public func view() -> UIView {
        let url = URL(string: "mapbox://styles/mapbox/streets-v11")
        mapView = MGLMapView(frame: frame, styleURL: url)
        mapView.delegate = self

        mapView.setCenter(CLLocationCoordinate2D(latitude: 45.522585, longitude: -122.685699), zoomLevel: 9, animated: false)

        var coordinates = [
        CLLocationCoordinate2D(latitude: 45.522585, longitude: -122.685699),
        CLLocationCoordinate2D(latitude: 45.534611, longitude: -122.708873),
        CLLocationCoordinate2D(latitude: 45.530883, longitude: -122.678833),
        CLLocationCoordinate2D(latitude: 45.547115, longitude: -122.667503),
        CLLocationCoordinate2D(latitude: 45.530643, longitude: -122.660121)
        ]

        let shape = MGLPolylineFeature(coordinates: &coordinates, count: UInt(coordinates.count))
        let source = MGLShapeSource(identifier: "route-source", features: [shape], options: nil)

        let lineStyle = MGLLineStyleLayer(identifier: "route-style", source: source)
        lineStyle.lineColor = NSExpression(forConstantValue: #colorLiteral(red: 0.1897518039, green: 0.3010634184, blue: 0.7994888425, alpha: 1))
        lineStyle.lineWidth = NSExpression(forConstantValue: 3)

        mapView.style?.addSource(source)
        mapView.style?.addLayer(lineStyle)

        mapView.addAnnotation(shape)
        let annotation = MGLPointAnnotation()
        annotation.coordinate = CLLocationCoordinate2D(latitude: 45.522585, longitude: -122.685699)
        annotation.title = "Annotation"
        mapView.addAnnotation(annotation)

        let longPress = UILongPressGestureRecognizer(target: self, action: #selector(didLongPress(_:)))
        mapView.addGestureRecognizer(longPress)

        return mapView
    }

    // Implement the delegate method that allows annotations to show callouts when tapped
    func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
        return true
    }

    @objc func didLongPress(_ sender: UILongPressGestureRecognizer) {
        guard sender.state == .began else { return }

            let point = sender.location(in: mapView)
            let coordinate = mapView.convert(point, toCoordinateFrom: mapView)

            let annotation = MGLPointAnnotation()
            annotation.coordinate = coordinate
            annotation.title = "Long Press"
            mapView.addAnnotation(annotation)
    }
}

对不起所有代码，但我认为将其全部显示会很有用。谢谢

Answer 1

您可能要检查mapbox_gl plugin的抖动。它将本机Android / iOS Mapbox地图视图显示为Flutter小部件，支持所有常用手势，这似乎是您想要实现的。

Flutter Tap手势无法与UiKitView和MapBox一起使用

1 个答案: