google maps iOS SDK：用作标记的自定义图标

Posted 2023-04-15

【中文标题】google maps iOS SDK：用作标记的自定义图标

【英文标题】：google maps iOS SDK: custom icons to be used as markers

【发布时间】：2017-03-05 17:49:07

【问题描述】：

android API 有一个非常方便的类IconGenerator。使用IconGenerator 在我的 Android 应用中，我可以轻松地制作一个标记：

是一个简单的矩形，具有我选择的颜色。 调整大小以容纳任意长度的文本。 不是信息窗口 - 我希望标记本身包含如下图所示的文本，来自 android 版本。

// Android - problem solved with IconGenerator
IconGenerator iconGenerator = new IconGenerator(context);
iconGenerator.setStyle(IconGenerator.STYLE_GREEN); // or any other color
Bitmap iconBitmap = iconGenerator.makeIcon(myString);
Marker m = new MarkerOptions().icon(BitmapDescriptorFactory.fromBitmap(iconBitmap))
                              .position(myLatLng);
map.addMarker(m); // map is a com.google.android.gms.maps.GoogleMap

有没有办法在 iOS 中使用 Swift 来做这么简单的事情？ ios api 的recent release 允许“标记自定义”，但我不知道如何将其应用于此用例。

// iOS (Swift) - I don't know how to create the icon as in code above
let marker = GMSMarker(position: myLatLng)
marker.icon = // How can I set to a rectangle with color/text of my choosing?
marker.map = map // map is a GMSMapView

【问题讨论】：

这就是我所提到的，创建一个与您的 android 相同的 UIView，它包含您的 $ 价格，然后从中创建一个 UIImage，我已经提到了相同的功能。跨度>

我在看到您更新的答案之前编辑了我的问题。我将在明天实施。同时，您能否更具体地了解 UIVIew/标签代码的外观。

好的，我会尝试制作您想要的类似视图。它只是一个将转换为图像的视图。您可以使用 BezierPaths 来实现类似视图的向下箭头点形状。另外，如果您不想要我在标记之上所做的，只需删除 mapView.selectedMarker = marker 行，它将是一个简单的标记

【参考方案1】：

这是我所做的

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

输出是

我的标记图像是

您可以根据需要更改颜色。此外，如果您想要矩形的东西，您可以创建一个简单的小矩形图像，然后像我在上面所做的那样使用它并更改您需要的颜色。

或者，如果您想要一个包含文本的矩形，您可以创建一个带有一些标签的小 UIView，然后将 UIView 转换为 UIImage 并可以做同样的事情。

//function to convert the given UIView into a UIImage
func imageWithView(view:UIView) -> UIImage 
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, false, 0.0)
    view.layer.render(in: UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image!

希望对你有帮助！！

【讨论】：

我尝试将imageWithView 与this constraint code 一起使用：let label = UILabel() 和label.widthAnchor.constraintEqualToConstant(50.0).active = true 但由于UIGraphicsGetCurrentContext() 内的UIGraphicsGetCurrentContext() 为nil，我崩溃了。

如何设置中心标题和sn-p？

【参考方案2】：

这是我为解决您面临的相同问题所做的工作。

我在我的图片资源中添加了下面的图片，

现在我在我的代码中添加了以下方法：

-(UIImage*)drawText:(NSString*)text inImage:(UIImage*)image

    UIFont *font = [UIFont boldSystemFontOfSize:11];
    CGSize size = image.size;
    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0f);
    [image drawInRect:CGRectMake(0, 0, size.width, size.height)];
    CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);

    NSMutableParagraphStyle *paragraphStyle = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
    paragraphStyle.alignment = NSTextAlignmentCenter;
    NSDictionary *attributes = @
                                 NSFontAttributeName : font,
                                 NSParagraphStyleAttributeName : paragraphStyle,
                                 NSForegroundColorAttributeName : [UIColor redColor]
                                 ;
    CGSize textSize = [text sizeWithAttributes:attributes];
    CGRect textRect = CGRectMake((rect.size.width-textSize.width)/2, (rect.size.height-textSize.height)/2 - 2, textSize.width, textSize.height);
    [text drawInRect:CGRectIntegral(textRect) withAttributes:attributes];

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return newImage;

现在，我调用了这个方法，同时将图标分配给 GMSMarker，如下所示：

marker.icon = [self drawText:@"$33.6" inImage:[UIImage imageNamed:@"icon-marker"]];

它将生成如下图像图标：

在这里，我根据需要保持背景图像大小固定。您仍然可以自定义它以根据文本大小以及多行进行调整。

更新

在 Swift 中更新了代码：

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

        let font = UIFont.systemFont(ofSize: 11)
        let size = inImage.size

        //UIGraphicsBeginImageContext(size)
        let scale = UIScreen.main.scale
        UIGraphicsBeginImageContextWithOptions(inImage.size, false, scale)
        inImage.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        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 : UIColor.black ]

        let textSize = text.size(withAttributes: attributes as? [NSAttributedString.Key : Any])
        let rect = CGRect(x: 0, y: 0, width: inImage.size.width, height: inImage.size.height)
        let textRect = CGRect(x: (rect.size.width - textSize.width)/2, y: (rect.size.height - textSize.height)/2 - 2, width: textSize.width, height: textSize.height)
        text.draw(in: textRect.integral, withAttributes: attributes as? [NSAttributedString.Key : Any])
        let resultImage = UIGraphicsGetImageFromCurrentImageContext()

        UIGraphicsEndImageContext()

        return resultImage

【讨论】：

您能快速编辑一下吗？如果这很快，并且它包含调整图像以容纳多达 70 个字符并缩小以容纳 3 个字符的代码，那么我会选择它。

能否提供最后一段的链接？

@kelalaka：我已经完成了自己的编程。我如何提供代码链接？如果您需要任何其他帮助，请告诉我

能否请您在 swift 4 或 4.2 中更新您的代码？？

@BhaveshM.Sarsawa ：立即查看

【参考方案3】：

您可以简单地在 Google 地图中添加自定义视图作为标记。

let marker = GMSMarker(position: coordinate)
marker.iconView = view // Your Custom view here

您可以在其上方使用 imageView（用于包含该橙色框）和标签（用于文本）

【讨论】：

这似乎是最快捷的方式。

【参考方案4】：

我试图重写Mehul Thakkar 对 Swift 3 的回答。希望它对你有用。但是像Dari 所说的那样制作自定义视图确实更容易。

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

        let font = UIFont.systemFont(ofSize: 11)
        let size = inImage.size

        UIGraphicsBeginImageContext(size)

        inImage.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        let style : NSMutableParagraphStyle = NSMutableParagraphStyle.default.mutableCopy() as! NSMutableParagraphStyle
        style.alignment = .center
        let attributes:NSDictionary = [ NSFontAttributeName : font, NSParagraphStyleAttributeName : style, NSForegroundColorAttributeName : UIColor.red ]

        let textSize = text.size(attributes: attributes as? [String : Any])
        let rect = CGRect(x: 0, y: 0, width: inImage.size.width, height: inImage.size.height)
        let textRect = CGRect(x: (rect.size.width - textSize.width)/2, y: (rect.size.height - textSize.height)/2 - 2, width: textSize.width, height: textSize.height)
        text.draw(in: textRect.integral, withAttributes: attributes as? [String : Any])
        let resultImage = UIGraphicsGetImageFromCurrentImageContext()

        UIGraphicsEndImageContext()

        return resultImage
    

【参考方案5】：

这里是Eridana 对Mehul Thakkar 答案的Swift 转换的Swift 5 版本。

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

    let font = UIFont.systemFont(ofSize: 11)
    let size = inImage.size

    UIGraphicsBeginImageContext(size)

    inImage.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
    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 : UIColor.red ]

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

    let rect = CGRect(x: 0, y: 0, width: inImage.size.width, height: inImage.size.height)
    let textRect = CGRect(x: (rect.size.width - textSize.width)/2, y: (rect.size.height - textSize.height)/2 - 2, width: textSize.width, height: textSize.height)
    text.draw(in: textRect.integral, withAttributes: attributes as? [NSAttributedString.Key : Any]  )

    let resultImage = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()

    return resultImage

【参考方案6】：

如果您只有 1 张图片，最简单的方法是：

 marker.icon = #imageLiteral(resourceName: "fault_marker")

1) 在最新的 XCode 中写入 marker.icon = "imageLiteral"。

2) 双击刚才出现的虚拟图片图标。

3) 选择所需的图像。

【参考方案7】：

                    //func to get Image view 
                // Url String :-  Your image coming from server
//image :- Background image
                    func drawImageWithProfilePic(urlString:String, image: UIImage) -> UIImageView 

                        let imgView = UIImageView(image: image)
                        imgView.frame = CGRect(x: 0, y: 0, width: 90, height: 90)

                        let picImgView = UIImageView()
                        picImgView.sd_setImage(with:URL(string: urlString))
                        picImgView.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
                        imgView.addSubview(picImgView)

                        picImgView.center.x = imgView.center.x
                        picImgView.center.y = imgView.center.y-10
                        picImgView.layer.cornerRadius = picImgView.frame.width/2
                        picImgView.clipsToBounds = true
                        imgView.setNeedsLayout()
                        picImgView.setNeedsLayout()

                //        let newImage = imageWithView(view: imgView)
                //        return newImage

                        return imgView
            


    //SHOW ON MAP

         let marker = GMSMarker()
         marker.position = CLLocationCoordinate2D(latitude: Double(lat)!, longitude:  Double(long)!)
        marker.iconView = self.drawImageWithProfilePic(urlString:getProviderImage,image: UIImage.init(named: "red")!)

【参考方案8】：

更改图标的简单和最简单的方法。只需将这 3 个图标（默认 marker.png）替换为您的图标（1x、2x、3x）。

在 Google 集群中，标记（图标）更改存在问题。