Google Maps iOS SDK: benutzerdefinierte Symbole als Marker

Question

Die Android-API hat eine sehr praktische Klasse dafür, IconGenerator. Mit Hilfe der IconGeneratorin meinem Android App, kann ich einfach einen Marker macht, dass:

1. mit der Farbe meiner Wahl ein einfaches Rechteck ist.
2. ändert die Größe, um Text beliebiger Länge zu halten.
3. ist NICHT ein Info-Fenster - Ich möchte, dass der Marker selbst den Text enthält, wie in der Abbildung unten von der Android-Version gezeigt.

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

Gibt es eine Möglichkeit etwas so einfaches wie dies in iOS mit Swift zu tun? Es gab eine recent release der iOS API, die "Marker Anpassung" erlaubt, aber ich sehe nicht, wie man es auf diesen Anwendungsfall anwenden.

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

Answer 1

Hier ist, was ich

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 

Der Ausgang ist

Und mein Markierungsbild war

getan haben

Sie können Ihre Farbe nach Ihren Bedürfnissen ändern. Auch wenn Sie etwas in rectange möchten, können Sie einfach ein einfaches kleines rechteckiges Bild erstellen und es wie ich oben verwenden und die Farbe Ihres Bedarfs ändern.

Oder wenn Sie ein Rechteck mit Text innerhalb sie wollen, können Sie nur eine kleine UIView mit einigen Label erstellen und konvertieren dann, dass UIView in UIImage und kann das gleiche tun.

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

Hoffe es hilft !!

Answer 2

Hier ist, was ich getan habe, um das gleiche Problem zu lösen, mit dem Sie konfrontiert sind.

Ich habe unten Bild in meinem Bild-Assets hinzugefügt,

Jetzt hinzugefügt i unten Methode in meinem 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; 
} 

Nun ich diese Methode genannt, während Symbol Zuweisen GMSMarker, wie folgt:

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

Es wird die generieren Bild-Symbol wie unten:

Hier hielt ich die Hintergrundbildgröße festgelegt, wie ich brauchte. Sie können es weiterhin anpassen, um es an die Textgröße sowie an mehrere Zeilen anzupassen.

Answer 3

Sie können einfach eine benutzerdefinierte Ansicht als Markierung in Google Map hinzufügen.

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

Sie können mit Imageview (zum Enthalten dass orange Farbe Kasten) und Etikett (für Text) darüber

Answer 4

ich Mehul Thakkar Antwort auf Swift 3. Hoffnung neu zu schreiben versucht, wird es für Sie arbeiten. Aber es ist wirklich einfacher, benutzerdefinierte Ansicht zu machen, wie Dari gesagt.

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 
    }