iOS中谷歌地图的气泡图标工厂

Question

我之前使用谷歌地图工具库在谷歌地图中绘制气泡图标，现在我想为 iOS 做同样的事情

https://developers.google.com/maps/documentation/android/utility/

我找到了这个适用于 iOS 的 pod https://github.com/googlemaps/google-maps-ios-utils

有没有人用它来创建气泡图标，如果是，我如何为 iOS 创建气泡图标？

Answer 1

不幸的是，IOS 没有这样的实用程序。我需要一个类似的解决方案，所以我提供了以下解决方案。

下面的函数绘制一个左箭头并返回一个 UIImage。请注意，可以仅使用路径来绘制箭头。此外，您还可以使用资产中预先创建的图像，而不是一直创建或创建一个重复使用它。

func drawArrow() ->UIImage {

    //the color of the arrow
    let color = UIColor.yellow

    // First create empty image choose the size according to your need.
    let width = 84
    let height = 24

    let size = CGSize( width: width, height: height)

    //let image: UIImage = makeEmptyImage(size: size)

    let rectangle = CGRect(x: 12, y: 0, width: 72, height: 24)

    UIGraphicsBeginImageContextWithOptions( size,  false,  0.0)
    let context = UIGraphicsGetCurrentContext()

    //clear the background
    context?.clear(CGRect(x: 0, y: 0, width: width, height: height))

    //draw the rectangle
    context?.addRect(rectangle)
    context?.setFillColor(color.cgColor)
    context?.fill(rectangle)

    //draw the triangle
    context?.beginPath()
    context?.move(   to: CGPoint(x : 12 ,y :  0) )
    context?.addLine(to: CGPoint(x :  0, y : 12) )
    context?.addLine(to: CGPoint(x : 12, y : 24) )
    context?.closePath()

    context?.setFillColor(color.cgColor)
    context?.fillPath()

    // get the image
    let image2 = UIGraphicsGetImageFromCurrentImageContext()!

    UIGraphicsEndImageContext()

    return image2
}

下一个函数，获取图像并在其上绘制文本。

func drawText(text:NSString, inImage:UIImage) -> UIImage? {

    let font = UIFont.systemFont(ofSize: 11)
    let color = UIColor.black
    let style : NSMutableParagraphStyle = NSMutableParagraphStyle.default.mutableCopy() as! NSMutableParagraphStyle
    style.alignment = .center

    let attributes:NSDictionary = [ NSAttributedString.Key.font :               font,
                                    NSAttributedString.Key.paragraphStyle :     style,
                                    NSAttributedString.Key.foregroundColor :    color
    ]

    let myInsets = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 0)
    let newImage = inImage.resizableImage(withCapInsets: myInsets)

    print("rect.width \(inImage.size.width) rect.height \(inImage.size.height)")


    let textSize = text.size(withAttributes: attributes as? [NSAttributedString.Key : Any] )

    let textRect = CGRect(x: 10, y: 5, width: textSize.width, height: textSize.height)

    UIGraphicsBeginImageContextWithOptions(CGSize(width: textSize.width + 20, height: textSize.height + 10), false, 0.0)

    newImage.draw(in: CGRect(x: 0, y: 0, width: textSize.width + 20 , height: textSize.height + 10))

    text.draw(in: textRect.integral, withAttributes: attributes as? [NSAttributedString.Key : Any]  )

    let resultImage = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()

    return resultImage
}

所以我们可以像这样使用它

marker.icon = drawText(text: eLoc.name as NSString, inImage: drawArrow() )

marker.groundAnchor = CGPoint(x: 0, y: 0.5)

//If you need some rotation          
//let degrees = CLLocationDegrees(exactly: 90.0)
//marker.rotation = degrees!

groundAnchor 移动标记图标的位置，参见anwser。使用度数可以旋转箭头。

注意：很遗憾，IOS 不支持 9-patch 映像。因此，并非所有的气泡图标工厂都可以使用 resizableImage 进行编程，请看这个漂亮的web site 和这个answer

一个示例输出是；

Answer 2

您是否查看了 google maps ios sdk 的自定义图标 documentation？这是一个好的开始。