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

lf2*_*215 15 google-maps google-maps-markers ios google-maps-sdk-ios swift

Android API有一个非常方便的类,IconGenerator.使用IconGenerator 我的Android应用程序,我可以轻松制作一个标记:

  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
Run Code Online (Sandbox Code Playgroud)

有没有办法在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
Run Code Online (Sandbox Code Playgroud)

Raj*_*ari 31

这就是我所做的

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
Run Code Online (Sandbox Code Playgroud)

输出是

在此输入图像描述

我的标记图像是

在此输入图像描述

您可以根据需要更改颜色.此外,如果你想在rectange中使用某些东西,你可以创建一个简单的小矩形图像并像上面那样使用它并改变你需要的颜色.

或者,如果你想在其中文本的矩形,你可以创建一个小的UIView一些标签,然后再转换UIViewUIImage,可以做同样的事情.

//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!
}
Run Code Online (Sandbox Code Playgroud)

希望能帮助到你!!


Meh*_*kar 6

以下是我为解决您面临的同一问题所做的工作.

我在我的图片资源中添加了以下图片,

在此输入图像描述

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

-(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;
}
Run Code Online (Sandbox Code Playgroud)

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

marker.icon = [self drawText:@"$33.6" inImage:[UIImage imageNamed:@"icon-marker"]];
Run Code Online (Sandbox Code Playgroud)

它将生成如下图像图标:

在此输入图像描述

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


Dar*_*ari 5

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

let marker = GMSMarker(position: coordinate)
marker.iconView = view // Your Custom view here
Run Code Online (Sandbox Code Playgroud)

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


Eri*_*ana 5

我试图将Mehul Thakkar的答案改写为Swift3。希望它对您有用。但是,如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
    }
Run Code Online (Sandbox Code Playgroud)