谷歌地图 iOS SDK：用作标记的自定义图标

google maps iOS SDK: custom icons to be used as markers

提问by lf215

The Android API has a very convenient class for this, IconGenerator. Using the IconGeneratorin my Android app, I can easily make a marker that:

Android API 有一个非常方便的类，IconGenerator. 使用IconGenerator在我的Android应用程序，我可以很容易地标记是：

1. is a simple rectangle with the color of my choosing.
2. resizes to hold text of any length.
3. is NOTan info window - I'd like the marker itself to contain the text as shown in the image below from the android version.

1. 是一个简单的矩形，带有我选择的颜色。
2. 调整大小以容纳任何长度的文本。
3. 是不是一个信息窗口-我想标记本身包含如图所示从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

Is there a way to do something as simple as this in iOS using Swift? There has been a recent releaseof the iOS api that allows "marker customization", but I don't see how to apply it to this use case.

有没有办法在iOS 中使用 Swift做这么简单的事情？出现了近期发布iOS的API，允许“标志定制”的，但我不明白如何将它应用到这个用例。

// 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

回答by Rajan Maheshwari

Here is what I have done

这是我所做的

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

The output is

输出是

And my marker image was

我的标记图像是

You can change your color as per your need. Also if you want something in rectange, you can just create a simple small rectangular image and use it like I did above and change the color of your need.

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

Or if you want a rectangle with text within it, you can just create a small UIViewwith some label and then convert that UIViewin UIImageand can do the same thing.

或者，如果你想在其中文本的矩形，你可以创建一个小的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!
}

Hope it helps!!

希望能帮助到你！！

回答by Mehul Thakkar

Here is what i have done for solving the same issue, that you are facing.

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

I have added below image in my image assets,

我在我的图像资产中添加了以下图像，

Now i added below method in my code:

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

-(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;
}

Now, I called this method, while assigning icon to GMSMarker, like this:

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

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

It will generate the image icon like below:

它将生成如下所示的图像图标：

Here, I kept the background Image size fixed, as i needed. You can still customize it to adjust it according to text size, as well as multiple lines.

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

UPDATE

更新

Updated code in Swift:

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
}

回答by Eridana

I tried to rewrite Mehul Thakkaranswer to Swift 3. Hope it will work for you. But it really easier to make custom view as Darisaid.

我试图重写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
    }

回答by Dari

You can simply add a custom view as marker in Google Map.

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

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

You can use imageView (for containing that orange color box) and label (for text) above it

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

回答by Yunus Karakaya

Here a Swift 5 version of Eridana's Swift conversion of Mehul Thakkar's answer.

这里是Eridana的 Swift 转换的 Mehul Thakkar答案的 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
}

回答by Davender Verma

                    //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")!)

回答by Parth Mandavia

Simple and easiest way to change icon. just replace these 3 icon (default marker.png) to your icon (1x,2x,3x).

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

In Google Cluster there was a problem with marker (icon) change.

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

回答by jeet.chanchawat

Simplest way to achieve if you have just 1 image :

如果您只有 1 张图像，则实现的最简单方法是：

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

1) In latest XCode write marker.icon = "imageLiteral".

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

2) Double click the dummy image icon appeared just now.

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

3) select desired image.

3）选择所需的图像。