Pin 图上方的位置标注视图 Swift ios MKMapView

Question

我有一个 MKAnnotation，带有自定义标注视图，添加到以下代码中：

func mapView(mapView: MKMapView,
             didSelectAnnotationView view: MKAnnotationView)
{

    if view.annotation is MKUserLocation
    {
        return
    }


    let customAnnotation = view.annotation as! MyAnnotation

    if (applicable) {
        let calloutView = CustomCallout()
        var r : MKMapRect = largeMapView.visibleMapRect
        let p : MKMapPoint = MKMapPointForCoordinate(customAnnotation.coordinate)
        r.origin.x = p.x - r.size.width * 0.5
        r.origin.y = p.y - r.size.height * 0.75

        // 3

        calloutView.translatesAutoresizingMaskIntoConstraints = false
        calloutView.imageView.translatesAutoresizingMaskIntoConstraints = false

        calloutView.clipsToBounds = true
        calloutView.imageView.clipsToBounds = true

        let mapPointCoordinate : CLLocationCoordinate2D = MKCoordinateForMapPoint(p)
        let pointAsCGPoint : CGPoint = self.largeMapView.convertCoordinate(mapPointCoordinate, toPointToView: self.largeMapView)
        calloutView.frame = CGRectMake(pointAsCGPoint.x, pointAsCGPoint.y, viewWidth! * 0.6, (viewHeight! - 110) * 0.6)
        calloutView.addSubview(calloutView.imageView)
        view.addSubview(calloutView)


        view.addConstraint(NSLayoutConstraint(item: calloutView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: (viewHeight! - 110) * 0.6))
        view.addConstraint(NSLayoutConstraint(item: calloutView, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: viewWidth! * 0.6))
        calloutView.addConstraint(NSLayoutConstraint(item: calloutView.imageView, attribute: .Top, relatedBy: .Equal, toItem: calloutView, attribute: .Top, multiplier: 1, constant: 0))
        calloutView.addConstraint(NSLayoutConstraint(item: calloutView.imageView, attribute: .Bottom, relatedBy: .Equal, toItem: calloutView, attribute: .Bottom, multiplier: 1, constant: 0))
        calloutView.addConstraint(NSLayoutConstraint(item: calloutView.imageView, attribute: .Leading, relatedBy: .Equal, toItem: calloutView, attribute: .Leading, multiplier: 1, constant: 0))
        calloutView.addConstraint(NSLayoutConstraint(item: calloutView.imageView, attribute: .Trailing, relatedBy: .Equal, toItem: calloutView, attribute: .Trailing, multiplier: 1, constant: 0))


        largeMapView.setVisibleMapRect(r, animated: true)

    }


}

当用户按下图钉时，我将地图移动到水平居中，并以 25-75 比例垂直于按下的图钉。现在我试图将 CustomCallOut 居中放置在图钉上方的正中央，但无论我做什么，它似乎都会在屏幕上不规则地定位自己。

Answer 1

使用自动布局时，您无需调整 frame 值，也无需关心地图坐标。只需添加相对于注释视图的约束。

例如，这会在 MKPinAnnotationView:

正上方添加一个 60x30 的空白灰色标注视图

func mapView(mapView: MKMapView, didSelectAnnotationView view: MKAnnotationView) {
    let calloutView = UIView()
    calloutView.translatesAutoresizingMaskIntoConstraints = false
    calloutView.backgroundColor = UIColor.lightGrayColor()
    view.addSubview(calloutView)

    NSLayoutConstraint.activateConstraints([
        calloutView.bottomAnchor.constraintEqualToAnchor(view.topAnchor, constant: 0),
        calloutView.widthAnchor.constraintEqualToConstant(60),
        calloutView.heightAnchor.constraintEqualToConstant(30),
        calloutView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor, constant: view.calloutOffset.x)
    ])
}

因此，将标注的底部锚点设置为相对于 MKAnnotationView，并将 centerX 设置为偏移 calloutOffset。

显然，您可以将标注的内容和大小设置为任何您想要的，但我希望这说明了使自定义标注视图在注释视图上居中的方法。

Pin 图上方的位置标注视图 Swift ios MKMapView

Position Call Out View Above Pin Swift ios MKMapView

mkmapview

mkannotationview

ios

mkmapviewdelegate

swift