我正在尝试找到将 MapBox 与 Flutter 结合使用的最佳方法,而 UiKitView/AndroidView 似乎是一个不错的方法。
我已经成功设置了一个 UiKitView,它加载带有注释和绘制折线的 MapBox,但是尝试使用 MapBox 允许的一些手势,例如点击注释以显示标注或使用 long 将注释放置在 map 上按下手势不起作用。应用程序运行时我没有看到任何错误或任何内容,因此很难判断是否出了问题或者只是没有执行任何操作。
某些手势确实有效,例如平移 map 或双击放大,但我想从 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)
}
}
对所有代码感到抱歉,但我认为展示全部代码会很有用。谢谢
最佳答案
您可能想查看mapbox_gl plugin对于 flutter 。它将原生 Android/iOS Mapbox map View 显示为支持所有常用手势的 Flutter 小部件,这似乎就是您想要实现的目标。
关于ios - Flutter 点击手势不适用于 UiKitView 和 MapBox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58630864/