如何在GoogleMaps for iOS中群集自定义图标标记

时间:2017-07-28 12:56:20

标签: ios iphone swift xcode google-maps

我正在开发一个应用程序,我想在地图上显示很多事件。用户可以单击某个事件并查看有关它的大量信息。 我使用自定义图像自定义了每个事件的标记图标,现在我想对每个自定义标记进行聚类。 我可以对GoogleMaps API的默认图标进行聚类,但如果我想将自己的标记图标聚集起来,我就无法进行聚合。

这是我目前的代码:

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)
}
}

我该怎么做?

查看我的应用程序的这些屏幕截图,然后您可以更好地理解我的问题。

First one there are the red default markers icons of the Google Maps, you can see in blue the cluster icon I was added in my project. Then you understand I added some locations on the viewDidLoad(), then the red markers are that. You can also see two others differents markers, the google one is orange and another one is my personal marker icon that I want to use for each marker icon of a location. But you can also see the issue, the issue is the blue cluster icon don't add the markers icons I added on the map (it shows 4 inside the blue cluster icon, it's the 4 icons around it but when the blue cluster icon appears the markers icons around it don't disappear.

Second image, if I make a zoom, the blue cluster icon disappears but you can also see another issue, the locations I was added have another red default markers icons of the Google Maps appears above them (you can see it at less because of my personal orange marker icon

1 个答案:

答案 0 :(得分:3)

您实际上是先聚类,然后添加标记,说明原因。

你应该做的是

val cars = ownerId.flatMap { 
  id => db run cars.filter(_.ownerId === id).result 
}