【问题标题】:Change MKMarkerAnnotationView size更改 MKMarkerAnnotationView 大小
【发布时间】:2020-08-17 03:06:06
【问题描述】:

如何更改MKMarkerAnnotationView 的大小?

我尝试设置annotationView.bounds.size = CGSize(width: 50, height: 50),但看起来大小没有改变。我还尝试打印出视图的大小,看起来它默认为 28,28

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
      guard annotation is MKPointAnnotation else { return nil }


      let annotationView = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: Constant.Indentifier.mapPoint)
      annotationView.canShowCallout = true
      annotationView.animatesWhenAdded = true
      annotationView.glyphImage = UIImage(systemName: "house.fill")
      annotationView.glyphTintColor = .systemBlue
      annotationView.markerTintColor = .white
      print(annotationView.bounds.size) // defaulted to 28,28
      annotationView.bounds.size = CGSize(width: 50, height: 50) // Does not change bubble size
      return annotationView
}

【问题讨论】:

标签: swift mapkit mkmapview mkmapviewdelegate


【解决方案1】:

参见glyphImagedocumentation,其中谈到了字形的大小:

当标记处于正常状态时会显示字形图像。创建字形图像作为模板图像,以便可以对其应用字形色调颜色。通常,您将此图像的大小设置为 iOS 上的 20 x 20 点和 tvOS 上的 40 x 40 点。但是,如果您没有在 selectedGlyphImage 属性中提供单独的选定图像,请将此图像的大小在 iOS 上设置为 40 x 40 磅,在 tvOS 上设置为 60 x 40 磅。 MapKit 会缩放大于或小于这些尺寸的图像。

归根结底,MKMarkerAnnotationView 的两个状态(选中和未选中)具有固定大小。

如果您想要更大的注释视图,您需要编写自己的 MKAnnotationView。例如,简单地创建一个大房子图像相对容易:

class HouseAnnotationView: MKAnnotationView {
    override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)

        let configuration = UIImage.SymbolConfiguration(pointSize: 50)
        image = UIImage(systemName: "house.fill", withConfiguration: configuration)
    }

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

顺便说一句,我建议注册这个注解视图类,如下所示,然后完全删除 mapView(_:viewFor:) 方法。

mapView.register(HouseAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)

现在,上面的注释视图只渲染一个大的“房子”图像。如果你想像MKMarkerAnnotationView 那样把它放在气泡中,你必须自己画出来:

class HouseAnnotationView: MKAnnotationView {
    override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)

        configureImage()
        configureView()
        configureAnnotationView()
    }

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

private extension HouseAnnotationView {
    func configureImage() {
        let radius: CGFloat = 25
        let center = CGPoint(x: radius, y: radius)
        let rect = CGRect(origin: .zero, size: CGSize(width: 50, height: 60))
        let angle: CGFloat = .pi / 16

        let image = UIGraphicsImageRenderer(bounds: rect).image { _ in
            UIColor.white.setFill()
            let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: .pi / 2 - angle, endAngle: .pi / 2 + angle, clockwise: false)
            path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
            path.close()
            path.fill()

            let configuration = UIImage.SymbolConfiguration(pointSize: 24)
            let house = UIImage(systemName: "house.fill", withConfiguration: configuration)!
                .withTintColor(.blue)
            house.draw(at: CGPoint(x: center.x - house.size.width / 2, y: center.y - house.size.height / 2))
        }

        self.image = image
        centerOffset = CGPoint(x: 0, y: -image.size.height / 2) // i.e. bottom center of image is where the point is
    }

    func configureView() {
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowRadius = 5
        layer.shadowOffset = CGSize(width: 3, height: 3)
        layer.shadowOpacity = 0.5
    }

    func configureAnnotationView() {
        canShowCallout = true
    }
}

产生:

但即使这样也不能重现所有 MKMarkerAnnotationView 行为。因此,这一切都取决于您需要多少 MKMarkerAnnotationView 行为/外观,以及拥有更大的注释视图是否值得所有这些努力。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-03-19
    • 2016-12-07
    • 1970-01-01
    • 2020-07-05
    • 1970-01-01
    • 1970-01-01
    • 2022-07-08
    相关资源
    最近更新 更多