wake-up-neo.com

google Maps iOS SDK: Benutzerdefinierte Symbole, die als Marker verwendet werden sollen

Die Android-API bietet hierfür eine sehr komfortable Klasse, IconGenerator . Mit der IconGeneratorin meiner Android-App kann ich problemlos eine Markierung erstellen, die

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

 enter image description here

// 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 in iOS mit Swift zu tun? Es gab eine letzte Version der iOS-API, die "Marker-Anpassung" erlaubt, aber ich sehe es nicht wie man es auf diesen Anwendungsfall anwendet.

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

Hier ist was ich getan habe

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

Die Ausgabe ist

 enter image description here

Und mein Markierungsbild war

 enter image description here

Sie können Ihre Farbe nach Ihrem Bedarf ändern. Wenn Sie etwas im rechten Winkel wünschen, können Sie einfach ein einfaches kleines rechteckiges Bild erstellen und es wie oben verwenden und die Farbe Ihres Bedarfs ändern.

Oder wenn Sie ein Rechteck mit Text darin haben möchten, können Sie einfach eine kleine UIView mit einer Beschriftung erstellen und diese UIView in UIImage konvertieren und dasselbe 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!
}

Ich hoffe es hilft!!

24

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

Ich habe in meinen Bild-Assets unteres Bild hinzugefügt.

 enter image description here

Nun habe ich folgende Methode in meinen Code eingefügt:

-(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 rief ich diese Methode an, während ich GMSMarker ein Symbol wie folgt zuwies:

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

Das Bildsymbol wird wie folgt generiert:

 enter image description here

Hier behielt ich die Hintergrundbildgröße unverändert bei. Sie können es immer noch anpassen, um es an die Textgröße sowie an mehrere Zeilen anzupassen.

5
Mehul Thakkar

Ich habe versucht, Mehul Thakkar Antwort auf Swift 3 neu zu schreiben. Ich hoffe, es wird für Sie funktionieren. Aber es ist wirklich einfacher, eine benutzerdefinierte Ansicht zu erstellen, wie Dari sagte.

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
    }
4
Eridana

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 imageView (für das orangefarbene Feld) und die Beschriftung (für Text) darüber verwenden

3
Dari

Hier eine Swift 5 Version von Eridana 's Swift Konvertierung von Mehul Thakkar ' s Antwort.

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
}
1
Yunus Karakaya

Der einfachste Weg, wenn Sie nur ein Bild haben:

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

1) Schreiben Sie im neuesten X-Code `marker.icon = imageLiteral".

2) Doppelklicken Sie auf das gerade angezeigte Dummy-Bildsymbol.

3) Wählen Sie das gewünschte Bild aus.

0
jeet.chanchawat