谷歌地图标记图标作为带边框的圆形图片

时间:2017-04-09 17:11:45

标签: ios swift google-maps firebase uiimageview

我要做的是将google地图标记设置为仅从我从firebase下载的UIImage。目前这是我的代码:

 if let downloadedImage = UIImage(data: data!) {

    let markerImageView: UIImageView? = nil

    markerImageView?.image = downloadedImage
    print(markerImageView?.image)
    markerImageView?.frame = CGRect(x: 0, y: 0, width: 50, height: 50)

    markerImageView?.layer.borderWidth = 1.0
    markerImageView?.layer.masksToBounds = false
    markerImageView?.layer.borderColor = UIColor.white.cgColor
    markerImageView?.layer.cornerRadius = (markerImageView?.frame.size.width)! / 2
    markerImageView?.clipsToBounds = true

    let actualFinalImage = markerImageView?.image

    marker.icon = actualFinalImage

}

我知道我从firebase获得了一个图像,那部分正在运行。但是,我认为问题出在这个部分:let markerImageView: UIImageView? = nil我认为将其设置为nil与标记图标冲突,这就是为什么这不起作用。但是,如果我取出零部分,我会收到一条错误消息,说明我无法在初始化之前编辑markerImageView。

任何帮助将不胜感激!

2 个答案:

答案 0 :(得分:1)

更轻松。我做了一个UIImage扩展,可以将任何图像转换成圆形。 不仅仅是调用函数。

extension UIImage {
    func circularImage(_ radius: CGFloat) -> UIImage? {
        var imageView = UIImageView()
        if self.size.width > self.size.height {
            imageView.frame =  CGRect(x: 0, y: 0, width: self.size.width, height: self.size.width)
            imageView.image = self
            imageView.contentMode = .scaleAspectFit
        } else { imageView = UIImageView(image: self) }
        var layer: CALayer = CALayer()

        layer = imageView.layer
        layer.masksToBounds = true
        layer.cornerRadius = radius
        UIGraphicsBeginImageContext(imageView.bounds.size)
        layer.render(in: UIGraphicsGetCurrentContext()!)
        let roundedImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return roundedImage
    }
}

因此,当您声明gmsmarker时,只需这样做

func downloadGMSMarkerImage(url: URL,marker : GMSMarker) {
    print("Download Started")
    getDataFromUrl(url: url) { data, response, error in
        guard let data = data, error == nil else { return }
        print(response?.suggestedFilename ?? url.lastPathComponent)
        print("Download Finished")
        DispatchQueue.main.async() {
            let pinImage = UIImage(data: data)
            let size = CGSize(width: 44, height: 44)
            UIGraphicsBeginImageContext(size)
            pinImage!.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
            let resizedImage = UIGraphicsGetImageFromCurrentImageContext()
            marker.icon = resizedImage?.circularImage(22)//call function if want the image cirle

        }
    }
}

和 您将得到类似

的结果

enter image description here

答案 1 :(得分:0)

请尝试按照指南 - Use the marker's icon property

进行操作
  

以下代码段会在 UIImage 属性中创建一个带有自定义图标的标记,该图标以 icon 的形式提供。图标以英格兰伦敦为中心。该代码段假定您的应用程序包含名为“house.png”的图像。

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView

有关自定义标记图像的更完整实现:​​

mapView.delegate = self

let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
let markerView = UIImageView(image: house)
markerView.tintColor = .red
londonView = markerView

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let marker = GMSMarker(position: position)
marker.title = "London"
marker.iconView = markerView
marker.tracksViewChanges = true
marker.map = mapView
london = marker

在相关的SO post

let marker = GMSMarker()

// I have taken a pin image which is a custom image
let markerImage = UIImage(named: "mapMarker")!.withRenderingMode(.alwaysTemplate)

//creating a marker view
let markerView = UIImageView(image: markerImage)

//changing the tint color of the image
markerView.tintColor = UIColor.red

marker.position = CLLocationCoordinate2D(latitude: 28.7041, longitude: 77.1025)

marker.iconView = markerView
marker.title = "New Delhi"
marker.snippet = "India"
marker.map = mapView

//comment this line if you don't wish to put a callout bubble
mapView.selectedMarker = marker

您将看到如何为UIImage分配markerImage以获取图像,标记视图为UIImageView设置图像。最后,将 markerView 称为marker.iconView value

希望这有帮助。