如何在iOS版GoogleMaps中对自定义图标标记进行聚类 [英] How to cluster custom icons markers in GoogleMaps for iOS

问题描述

我正在开发一个想要在地图上显示很多事件的应用程序.用户可以单击事件并查看有关该事件的很多信息. 我用自定义图像自定义了每个事件的标记图标，现在我想对每个自定义标记进行聚类. 我可以对GoogleMaps API的默认图标进行聚类，但是如果我要对自己的标记图标进行聚类，则无法做到这一点.

I'm developing an app on which I want to show a lot of event on the map. The user can click on an event and see a lot of information about it. I customized the marker icon of each event with a custom image and now I want to cluster each custom markers. I'm able to cluster the default icon of GoogleMaps API but if I want to cluster my own marker icon I'm not able to do it.

这是我当前的代码:

var mapView: GMSMapView!
var clusterManager: GMUClusterManager!
let isClustering: Bool = true
let isCustom: Bool = true

override func viewDidLoad() {
    super.viewDidLoad()

    mapView = GMSMapView(frame: view.frame)
    mapView.camera = GMSCameraPosition.camera(withLatitude: 13.756331, longitude: 100.501765, zoom: 12.0)
    mapView.mapType = .normal
    mapView.delegate = self
    view.addSubview(mapView)

    if isClustering {
        var iconGenerator: GMUDefaultClusterIconGenerator!
        if isCustom { // Here's my image if the event are clustered
            var images: [UIImage] = [UIImage(named: "m1.png")!, UIImage(named: "m2.png")!, UIImage(named: "m3.png")!, UIImage(named: "m4.png")!, UIImage(named: "m5.png")!]
            iconGenerator = GMUDefaultClusterIconGenerator(buckets: [5, 10, 15, 20, 25], backgroundImages: images)
        } else {
            iconGenerator = GMUDefaultClusterIconGenerator()
        }

        let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
        let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)

        clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)
        clusterManager.cluster()
        clusterManager.setDelegate(self, mapDelegate: self)
    } else {
    }

    // Here's my personal marker icon (for one location)
    let firstLocation = CLLocationCoordinate2DMake(48.898902, 2.282664)
    let marker = GMSMarker(position: firstLocation)
    marker.icon = UIImage(named: "pointeurx1") //Apply custom marker
    marker.map = mapView

    let secondLocation = CLLocationCoordinate2DMake(48.924572, 2.360207)
    let secondMarker = GMSMarker(position: secondLocation)
    secondMarker.icon = UIImage(named: "pointeurx1")
    secondMarker.map = mapView

    let threeLocation = CLLocationCoordinate2DMake(48.841619, 2.253113)
    let threeMarker = GMSMarker(position: threeLocation)
    threeMarker.icon = UIImage(named: "pointeurx1")
    threeMarker.map = mapView

    let fourLocation = CLLocationCoordinate2DMake(48.858575, 2.294556)
    let fourMarker = GMSMarker(position: fourLocation)
    fourMarker.icon = UIImage(named: "pointeurx1")
    fourMarker.map = mapView

    let fiveLocation = CLLocationCoordinate2DMake(48.873819, 2.295200)
    let fiveMarker = GMSMarker(position: fiveLocation)
    fiveMarker.icon = UIImage(named: "pointeurx1")
    fiveMarker.map = mapView
}

/// Point of Interest Item which implements the GMUClusterItem protocol.
class POIItem: NSObject, GMUClusterItem {
    var position: CLLocationCoordinate2D
    var name: String!

    init(position: CLLocationCoordinate2D, name: String) {
        self.position = position
        self.name = name
    }
}

func clusterManager(_ clusterManager: GMUClusterManager, didTap cluster: GMUCluster) {
    let newCamera = GMSCameraPosition.camera(withTarget: cluster.position, zoom: mapView.camera.zoom + 1)
    let update = GMSCameraUpdate.setCamera(newCamera)
    mapView.moveCamera(update)
}
}

我该怎么办?

看看我的应用程序的这些屏幕截图，那么也许您可以更好地理解我的问题.

Look at these screenshots of my app then maybe you could understand better my issue.

第一个是Google地图的红色默认标记图标，您可以看到蓝色我在项目中添加的群集图标.然后，您知道我在viewDidLoad()上添加了一些位置，然后是红色标记.您还可以看到其他两个不同的标记，谷歌的一个是橙色，另一个是我的个人标记图标，我想将其用于位置的每个标记图标.但是您也可以看到问题，问题是蓝色集群图标没有添加我在地图上添加的标记图标(蓝色集群图标内部显示4个标记，周围是4个图标，但是当蓝色集群图标出现时它周围的标记图标不会消失.

第二张图片，如果进行缩放，蓝色簇图标消失，但您也可以看到另一个问题是，我添加的位置上方还有一个红色的Google地图默认标记图标(由于我的个人橙色标记图标

推荐答案

您实际上是在首先进行集群，然后添加标记来说明为什么会发生这种情况.

You are actually clustering first then adding markers thats why this is happening.

您实际上应该做的是

class MarkerModel: NSObject, GMUClusterItem {
var position: CLLocationCoordinate2D
var name: String

init(position: CLLocationCoordinate2D, name: String) {
    self.position = position
    self.name = name
}
}


override func viewDidLoad() {
super.viewDidLoad()

mapView = GMSMapView(frame: view.frame)
mapView.camera = GMSCameraPosition.camera(withLatitude: 13.756331, longitude: 100.501765, zoom: 12.0)
mapView.mapType = .normal
mapView.delegate = self
view.addSubview(mapView)

if isClustering {
    var iconGenerator: GMUDefaultClusterIconGenerator!
    if isCustom { // Here's my image if the event are clustered
        var images: [UIImage] = [UIImage(named: "m1.png")!, UIImage(named: "m2.png")!, UIImage(named: "m3.png")!, UIImage(named: "m4.png")!, UIImage(named: "m5.png")!]
        iconGenerator = GMUDefaultClusterIconGenerator(buckets: [5, 10, 15, 20, 25], backgroundImages: images)
    } else {
        iconGenerator = GMUDefaultClusterIconGenerator()
    }

    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)

    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

} else {
}
}

func addMarkers(cameraLatitude : Float, cameraLongitude : Float) {
    let extent = 0.01
    for index in 1...clusterItemCount {
        let lat = cameraLatitude + extent * randomScale()
        let lng = cameraLongitude + extent * randomScale()
        let name = "Item \(index)"

        let position = CLLocationCoordinate2DMake(lat, lng)

        let item = MarkerModel(position: position, name: name)
        item.icon = #imageLiteral(resourceName: "marker")
        clusterManager.add(item)
    }
     clusterManager.cluster()
        clusterManager.setDelegate(self, mapDelegate: self)
}

func randomScale() -> Double {
    return Double(arc4random()) / Double(UINT32_MAX) * 2.0 - 1.0
}

func renderer(_ renderer: GMUClusterRenderer, markerFor object: Any) -> GMSMarker? {

    let marker = GMSMarker()
    if let model = object as? MarkerModel {
         // set image view for gmsmarker
    }

    return marker
}

func clusterManager(_ clusterManager: GMUClusterManager, didTap cluster: GMUCluster) -> Bool {
    let newCamera = GMSCameraPosition.camera(withTarget: cluster.position, zoom: mapView.camera.zoom + 1)
    let update = GMSCameraUpdate.setCamera(newCamera)
    mapView.moveCamera(update)
    return false
}

这篇关于如何在iOS版GoogleMaps中对自定义图标标记进行聚类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！