it-swarm.com.ru

google Maps iOS SDK: пользовательские значки, которые будут использоваться в качестве маркеров

У API Android есть очень удобный класс для этого, IconGenerator . Используя IconGeneratorв моем приложении для Android, я легко могу сделать маркер, который:

  1. это простой прямоугольник с цветом по моему выбору. 
  2. изменяет размеры, чтобы держать текст любой длины. 
  3. НЕ информационное окно - я бы хотел, чтобы сам маркер содержал текст, как показано на рисунке ниже из версии для Android.

 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

Есть ли способ сделать что-то столь же простое в iOS с использованием Swift? Был недавний выпуск API iOS, который позволяет "настройку маркера", но я не вижу как применить это к этому варианту использования.

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

Вот что я сделал

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

Результат

 enter image description here

И мое маркерное изображение было

 enter image description here

Вы можете изменить свой цвет в соответствии с вашими потребностями. Также, если вы хотите что-то в прямоугольнике, вы можете просто создать простое маленькое прямоугольное изображение и использовать его, как я делал выше, и изменить цвет по вашему желанию.

Или, если вам нужен прямоугольник с текстом внутри, вы можете просто создать небольшой 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!
}

Надеюсь, поможет!!

24
Rajan Maheshwari

Вот что я сделал для решения той же проблемы, с которой вы столкнулись.

Я добавил изображение ниже в мои активы изображения,

 enter image description here

Теперь я добавил метод ниже в моем коде:

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

Теперь я вызвал этот метод при назначении значка для GMSMarker, например так:

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

Будет сгенерирован значок изображения, как показано ниже:

 enter image description here

Здесь я сохранил размер фонового изображения, как мне было нужно. Вы все еще можете настроить его, чтобы настроить его в соответствии с размером текста, а также несколькими строками.

5
Mehul Thakkar

Я пытался переписать Мехул Таккар ответить на Swift 3. Надеюсь, это сработает для вас. Но действительно проще сделать пользовательский вид, как Дари .

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

Вы можете просто добавить пользовательский вид в качестве маркера на Google Map.

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

Вы можете использовать imageView (для содержания этого оранжевого цвета) и метку (для текста) над ним

3
Dari

Самый простой способ добиться, если у вас есть только 1 изображение:

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

1) В последнем X-коде напишите `marker.icon = imageLiteral".

2) Двойной клик на иконке фиктивного изображения появился только сейчас.

3) выберите желаемое изображение.

0
jeet.chanchawat