如何在GMSMapView上设置自定义注释标记(围绕点的动画环)

时间:2013-08-30 09:18:10

标签: ios objective-c google-maps mapkit google-maps-sdk-ios

使用Google地图iOS SDK我已经实现了mapView 因为我已经创建了如下标记

// Creates a marker in the center of the map.
GMSMarker *marker = [[GMSMarker alloc] init];
marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
marker.title = @"Sydney";
marker.snippet = @"Australia";

marker.icon = [UIImage imageNamed:@"point1.png"]; 

marker.map = mapView_;

但是我需要显示动画图像,即要显示的一些图像序列,一个点周围的动画环,而不是原始的GMSMarker

图像序列为point1.png point2.png point3.png point4.png point5.png

任何人都可以帮助我实现这个目标

5 个答案:

答案 0 :(得分:3)

- (RMMapLayer *)mapView:(RMMapView *)mpView layerForAnnotation:(RMAnnotation *)annotation
{

  UIImageView *pulseRingImg = [[UIImageView alloc] initWithFrame: CGRectMake(-30, -30, 78, 78)];
    pulseRingImg.image = [UIImage imageNamed:@"PulseRing.png"];
     pulseRingImg.userInteractionEnabled = NO;

    CABasicAnimation *theAnimation;
    theAnimation=[CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
    theAnimation.duration=2.0;
    theAnimation.repeatCount=HUGE_VALF;
    theAnimation.autoreverses=NO;
    pulseRingImg.alpha=0;
    theAnimation.fromValue=[NSNumber numberWithFloat:0.0];
    theAnimation.toValue=[NSNumber numberWithFloat:1.0];
    pulseRingImg.alpha = 1;
    [pulseRingImg.layer addAnimation:theAnimation forKey:@"pulse"]; 
     pulseRingImg.userInteractionEnabled = NO;

    [mapView addSubview:pulseRingImg];
    [marker addSublayer:pulseRingImg.layer];

 return marker;

}
[UIImage imageNamed:@"PulseRing.png"]中的

PulseRing.png

PulseRing.png

参考:

ios - how to do a native "Pulse effect" animation on a UIButton

CABasicAnimation *theAnimation;

theAnimation=[CABasicAnimation animationWithKeyPath:@"opacity"];
theAnimation.duration=1.0;
theAnimation.repeatCount=HUGE_VALF;
theAnimation.autoreverses=YES;
theAnimation.fromValue=[NSNumber numberWithFloat:1.0];
theAnimation.toValue=[NSNumber numberWithFloat:0.0];
[myButton.layer addAnimation:theAnimation forKey:@"animateOpacity"]; 

答案 1 :(得分:3)

从谷歌地图sdk /它出现在此刻v1.9是使用基于框架的图像的唯一支持的动画。如果你正在使用mapkit - >你可以简单地使用https://github.com/TransitApp/SVPulsingAnnotationView

来自google的sdk - > ios样本

AnimatedCurrentLocationViewController.m

            NSMutableArray *frames = [NSMutableArray array];
            for (int i =0; i<146; i++) {
                NSString *img = [NSString stringWithFormat:@"pulse-%d",i];
                [frames addObject:[UIImage imageNamed:img]];
            }
           marker.icon = [UIImage animatedImageWithImages:frames duration:3];

在我的动画书https://github.com/johndpope/Flipbook的分支上,我已经将视网膜中的脉冲动画渲染成一堆透明的png图像。可以在photoshop中进一步减少这些文件大小。当然这不太理想,会导致您的二进制文件大小膨胀但是可以通过。

答案 2 :(得分:2)

你试过这个吗? https://github.com/shu223/Pulsator

启动并添加到视图的图层,然后调用start!

let pulsator = Pulsator()
view.layer.addSublayer(pulsator)
pulsator.start()

答案 3 :(得分:0)

对于SWIFT 3:

您可以使用UIImage.animatedImage作为标记的图标,如下所示:

  1. 使用不同的图像创建一个UIImage数组

    let image1 = UIImage(named: "marker-image-1")
    let image2 = UIImage(named: "marker-image-2")
    let image3 = UIImage(named: "marker-image-3")
    
    let imagesArray = [image1,image2,image3]
    
  2. 设置标记的图标:

    marker.icon = UIImage.animatedImage(with: imagesArray as! [UIImage], duration: 1.2)
    marker.map = mapView
    
  3. 您可以更改动画的持续时间

  4. 运行您的应用,您会看到使用不同图像设置动画的标记

答案 4 :(得分:-1)

您可以通过更改标记图标属性来自定义标记。

例如: london.icon = [UIImage imageNamed:@“house”]; 你可以在那里提供你自己的图像或一些编辑过的图像。

如果要自定义单击标记后将显示的信息窗口。

参考该链接

https://developers.google.com/live/shows/864758637