Swift 3 - Mapbox - 自定义用户位置标注

Question

我想更改用户位置注释的外观。我知道现在可以使用 MGLUserLocationAnnotationView，但是，我不确定如何实现它。任何人都可以提供一个简单的例子来说明这是如何完成的吗？

谢谢

Answer 1

你是对的。地图框 API MGLUserLocationAnnotationView description is very short. The user location view customisation is available since MapBox iOS SDK 3.4.0. See also the feature comments on the MapBox GitHub

重要的是要注意：MGLUserLocationAnnotationView 是 MGLAnnotationView 的子class。这意味着 MGLUserLocationAnnotationView 的行为就像一个普通的注释视图。

这里是一个如何自定义用户位置视图的例子。创建一个新的 class（例如 CustomUserLocationAnnotationView）并覆盖 layoutSubviews() 以添加自定义代码。在此示例中，我使用 UIImage UserLocationIcon.png 来可视化用户在地图上的位置。

import Foundation
import UIKit
import Mapbox

final class CustomUserLocationAnnotationView: MGLUserLocationAnnotationView {
    override init(reuseIdentifier: String?) {
        super.init(reuseIdentifier: reuseIdentifier)
    }

    override init(frame: CGRect) {
        super.init(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        // Force the annotation view to maintain a constant size when the map is tilted.
        scalesWithViewingDistance = false

        layer.contentsScale = UIScreen.main.scale
        layer.contentsGravity = kCAGravityCenter

        // Use your image here
        layer.contents = UIImage(named: "UserLocationIcon")?.cgImage
    }
}

在您的 UIViewController 或其他任何东西（例如服务 class）中，使用至少两个函数 -mapViewDidFinishLoadingMap 实现 MGLMapViewDelegate：和 -mapView:viewForAnnotation:。查看我的在线评论：

extension ViewController: MGLMapViewDelegate {
    // Wait until the map is loaded before proceed with other actions on map
    func mapViewDidFinishLoadingMap(_ mapView: MGLMapView) {
        // Show the user location here
        mapView.showsUserLocation = true
    }

    func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
        // Customise the user location annotation view
        if annotation is MGLUserLocation {
            var userLocationAnnotationView = mapView.dequeueReusableAnnotationView(withIdentifier: "CustomUserLocationAnnotationViewIdentifier") as? CustomUserLocationAnnotationView

            if userLocationAnnotationView == nil {
                userLocationAnnotationView = CustomUserLocationAnnotationView(reuseIdentifier: "CustomUserLocationAnnotationViewIdentifier")
            }

            // Optional: You can save the annotation object for later use in your app
            self.userLocationAnnotation = annotation

            return userLocationAnnotationView
        }

        // Customise your annotation view here...

        return customAnnotationView
    }
}

为包括用户注释视图在内的每个注释视图实例调用 MapView -mapView:viewForAnnotation: 委托函数。

可选： 要获取您的 CustomUserLocationAnnotationView 实例，您可以在代码中的任何地方使用此函数：

    // The userLocationAnnotation was previously saved in your ViewController in the -mapView:viewForAnnotation: delegate function
    let view = mapView.view(for: self.userLocationAnnotation) as? CustomUserLocationAnnotationView

Swift 3 - Mapbox - 自定义用户位置标注

Swift 3 - Mapbox - Customize User Location Annotation

ios

mapbox

swift