如何在 iOS 中使用谷歌地图创建自定义 MarkerView

Question

我想在GoogleMap 上创建这个 customMarkerView（带有酒店 sahara star 和 Marine Drive 的视图），并且应该能够在不点击的情况下看到地图上的两个视图。

推荐swift4。

就像uber，

检查参考图像。

Answer 1

您可以使用GMSMarker()在地图中添加两个MarkerViews

将它们放入array 然后您可以使用GMSCoordinateBounds 聚焦地图以显示所有标记。 下面的代码展示了如何聚焦地图。

    var bounds = GMSCoordinateBounds()
    for marker in yourArrayOfMarkers
    {
        bounds = bounds.includingCoordinate(marker.position)
    }
    let update = GMSCameraUpdate.fit(bounds, withPadding: 60)
    mapView.animate(with: update)

Answer 2

func customMarkerView(titleText : String, markerImg : UIImage) -> UIImage{
    let mainView : UIView = UIView()
    let subView : UIView = UIView()
    let padding : CGFloat = 8.0
    let rightImgView : UIImageView = UIImageView()
    let markerImgView : UIImageView = UIImageView()
    let cfont = UIFont(name: "Roboto-Regular", size: 16.0)
    //createing marker label.
    let titleLabel : UILabel = UILabel(frame: CGRect(x: 4.0, y: 4.0, width: 150.0, height: cfont!.lineHeight))
    titleLabel.lineBreakMode = .byWordWrapping
    titleLabel.font = cfont!
    titleLabel.text = titleText
    titleLabel.numberOfLines = 0
    titleLabel.sizeToFit()
    titleLabel.backgroundColor = UIColor.white
    let noLines = titleLabel.frame.size.height / cfont!.lineHeight

    if noLines > 2{
        titleLabel.numberOfLines = 2
        titleLabel.frame = CGRect(x: 4.0, y: 4.0, width: titleLabel.frame.width, height: 2 * cfont!.lineHeight)
    }else{
        titleLabel.frame = CGRect(x: 4.0, y: 4.0, width: titleLabel.frame.width, height: 24.0)
    }


    let rightArrow = UIImage(named: "right-arrow")
    rightImgView.frame = CGRect(x: titleLabel.frame.origin.x + titleLabel.frame.width + padding, y: 4.0, width: 24.0, height: titleLabel.frame.height)
    rightImgView.image = rightArrow!
    rightImgView.contentMode = .center

    subView.addSubview(titleLabel)
    subView.addSubview(rightImgView)

    subView.frame = CGRect(x: 0.0, y: 0.0, width: 2 * 4.0 + titleLabel.frame.width + padding + rightImgView.frame.width, height: 2 * 4.0 + titleLabel.frame.height)
    subView.backgroundColor = UIColor.white

    markerImgView.frame = CGRect(x: subView.center.x - markerImg.size.width/2, y: subView.frame.height + 4.0, width: markerImg.size.width, height: markerImg.size.height)
    markerImgView.image = markerImg
    markerImgView.contentMode = .scaleAspectFit

    mainView.addSubview(markerImgView)

    mainView.frame = CGRect(x: 0.0, y: 0.0, width: subView.frame.width, height: subView.frame.height + 4.0 + markerImgView.frame.height)
    mainView.addSubview(subView)
    mainView.backgroundColor = UIColor.clear
    UIGraphicsBeginImageContextWithOptions(mainView.bounds.size, false, UIScreen.main.scale)
    mainView.layer.render(in: UIGraphicsGetCurrentContext()!)
    let icon : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return icon
}