谷歌MapiOS SDK：自定义图标用作标记

vof42yt1 于 2023-03-24 发布在 iOS

关注(0)|答案(9)|浏览(166)

Android API有一个非常方便的类IconGenerator。使用我的Android应用程序中的IconGenerator，我可以轻松地制作一个标记：
1.是一个简单的长方形，颜色由我选择。
1.调整大小以容纳任意长度的文本。
1.是不是**一个信息窗口-我想标记本身包含的文本，如下面的图片所示，从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

ios

来源：https://stackoverflow.com/questions/40210145/google-maps-ios-sdk-custom-icons-to-be-used-as-markers

9条答案

按热度按时间

kxe2p93d1#

以下是我所做的

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!
}

希望对你有帮助！！

赞(0）回复(0）举报 2023-03-24

8wigbo562#

这是我所做的解决同样的问题，你所面临的。
我在我的图片资产中添加了下面的图片，

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

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

现在，我调用了这个方法，同时将icon分配给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
}

赞(0）回复(0）举报 2023-03-24

huwehgph3#

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

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

您可以使用imageView（用于包含橙子框）和它上面的label（用于文本）

赞(0）回复(0）举报 2023-03-24

ki0zmccv4#

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

赞(0）回复(0）举报 2023-03-24

aij0ehis5#

这里有一个Swift 5版本的Eridana的Swift转换的Mehul Thakkar的答案。

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
}

赞(0）回复(0）举报 2023-03-24

cunj1qz16#

最简单的方法来实现，如果你只有一个图像：

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

1)在最新的XCode中写入marker.icon = "imageLiteral"。
2)双击刚才出现的虚拟图像图标。
3)选择所需的图像。

赞(0）回复(0）举报 2023-03-24

yhqotfr87#

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

赞(0）回复(0）举报 2023-03-24

mspsb9vt8#

简单和最简单的方法来改变图标.只需替换这些3图标（默认marker.png）到您的图标（1x，2x，3x）.
在Google Cluster中，标记（图标）更改存在问题。

赞(0）回复(0）举报 2023-03-24

lnvxswe29#

这就是我如何实现它，完全是程序化的：

//custom markers for the map
class CustomMarker: GMSMarker {

    var label: UILabel!

    init(labelText: String, imageName: String) {
        super.init()

        let iconView = UIImageView(frame: CGRect(origin: .zero, size: CGSize(width: 60, height: 60)))
        iconView.image = UIImage(named: imageName)//Assign image to ImageView
        
        
        if(labelText != "1"){
            label = UILabel(frame: CGRect(origin: .zero, size: CGSize(width: 25, height: 25)))
            label.frame.origin.x = 25;
            
            label.text = labelText
            label.layer.cornerRadius =  label.frame.width/2
            label.layer.masksToBounds = true
            label.backgroundColor = .white
            label.applyBorder(width: 0.5, color: .black)
            label.textAlignment = .center
            iconView.addSubview(label)
        }

        
        self.iconView = iconView
    }
}

函数调用：

let marker = CustomMarker(labelText: addressCount.description, imageName: mapItem.cMapType!.lowercased())

结果：

赞(0）回复(0）举报 2023-03-24

我来回答

谷歌MapiOS SDK：自定义图标用作标记

9条答案

相关问题

热门标签

最新问答