关于ios：如何在GMSMapView上设置自定义注释标记(围绕一个点的动画环)

How set Custom Annotation markers ( animated rings around a point) on GMSMapView

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

1
2
3
4
5
6
7
8
9

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

谁能帮我实现这个

从 google map sdk / 看来，此时 v1.9 是唯一支持使用基于框架的图像的动画。如果您使用的是 mapkit – > 您可以简单地使用 https://github.com/TransitApp/SVPulsingAnnotationView

来自 google 的 sdk -> ios 示例

AnimatedCurrentLocationViewController.m

1
2
3
4
5
6

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 中进一步减小这些文件大小。当然这并不理想，并且会导致您的二进制文件大小膨胀但可以通过。

在

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

}

PulseRing.png in [UIImage imageNamed:@”PulseRing.png”] 是

获取参考来源：

ios – 如何在 UIButton

上制作原生”脉冲效果”动画

1
2
3
4
5
6
7
8
9

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”];

相关讨论

如何添加额外的脉冲图像？例如：我有一个无限重复，但在环结束/重复之前，我希望下一个开始。这样用户将看到两个环。
什么是 RMMapLayer，我无法在谷歌地图框架中看到它。
此答案特定于 mapbox – 不是 Google ios sdk mapbox.com/mapbox-ios-sdk

你试过吗？
https://github.com/shu223/Pulsator

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

1
2
3

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

对于 SWIFT 3：

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

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

1
2
3
4
5

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]

设置标记的图标：

1 2	marker.icon = UIImage.animatedImage(with: imagesArray as! [UIImage], duration: 1.2) marker.map = mapView

你可以改变动画的持续时间

运行您的应用程序，您将看到带有不同图像的标记动画

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

例如：
london.icon = [UIImage imageNamed:@”house”];
您可以在此处提供自己的图像或一些经过编辑的图像。

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

参考那个链接

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

How set Custom Annotation markers ( animated rings around a point) on GMSMapView

猜你喜欢