谷歌地图SDK的iOS端 在2017年出了新的API,可以生成热力图,下面就教大家如何生成热力图
首先需要添加谷歌地图及热力图支持SDK,目前我用的cocoapods添加
pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'
然后pod install就可以集成谷歌地图了
添加谷歌地图
self.mapView = [[GMSMapView alloc] init];
self.mapView.settings.rotateGestures = NO;
self.mapView.settings.tiltGestures = NO;
self.mapView.settings.allowScrollGesturesDuringRotateOrZoom = NO;
self.mapView.myLocationEnabled = YES;
self.mapView.delegate = self;
创建热力图Layer
self.heatMapLayer = [[GMUHeatmapTileLayer alloc] init];
NSMutableArray* colors = @[].mutableCopy;
[colorsaddObject:[MUAppHelper colorWithHexString:@"#FFD800"]];
[colorsaddObject:[MUAppHelper colorWithHexString:@"#F03F05"]];
//赋值热力图的权重色值,权重从低到高
self.heatMapLayer.gradient = [[GMUGradient alloc] initWithColors:colors startPoints:@[@0.01,@0.5] colorMapSize:256];
//透明度,设置太高会遮住地图,太低会看不清
self.heatMapLayer.opacity =0.7;
//热力图半径,设置太高热力图会比较大,根据需求来自己调吧
self.heatMapLayer.radius =25;
紧接着就要获取热力图数据了。获取的是经纬度和权重,统一添加到数组中,赋值给heatMapLayer的数据中。
由于数据量可能比较大,所以我们使用多线程处理数据,处理完毕后主线程刷新UI
NSOperationQueue* queue = [NSOperationQueue new];
NSBlockOperation* operation = [NSBlockOperation blockOperationWithBlock:^{
NSMutableArray* locationArr =@[].mutableCopy;
for (HeatMapLocation* location in self.locationCollection.orderCoordinates) {
//将经纬度和权重添加到数组中。intensity是权重
[locationArr addObject:[[GMUWeightedLatLng alloc] initWithCoordinate:CLLocationCoordinate2DMake(location.lat, location.lon) intensity:0.666]];
}
for (HeatMapLocation* location in self.locationCollection.cancelCoordinates) {
[locationArr addObject:[[GMUWeightedLatLng alloc] initWithCoordinate:CLLocationCoordinate2DMake(location.lat, location.lon) intensity:1]];
}
for (HeatMapLocation* location in self.locationCollection.openCoordinates) {
[locationArr addObject:[[GMUWeightedLatLng alloc] initWithCoordinate:CLLocationCoordinate2DMake(location.lat, location.lon) intensity:0.333]];
}
//GMUWeightedLatLng
dispatch_async(dispatch_get_main_queue(), ^{
self.heatMapLayer.weightedData = locationArr;
self.heatMapLayer.map =self.mapView;
});
}];
[queue addOperation:operation];
添加完毕后就会发现热力图已经显示了
如图