iOS 용 GoogleMaps에서 Firebase의 마커를 클러스터하는 방법

Question

지도에서 많은 이벤트를 보여주고 싶은 앱을 개발 중입니다. 사용자는 이벤트를 클릭하여 이벤트에 대한 많은 정보를 볼 수 있습니다. 다른보기에서, 사용자는 새로운 이벤트를 생성 할 수 있으며 그 다음 위치와 제목은 Firebase 데이터베이스에 저장됩니다. 그러면 다른 사용자가 내 앱에서 Google지도를 볼 때지도의 마커 인 모든 이벤트를 볼 수 있습니다. 사용자가 맵에서 축소 할 때 Firebase에서 마커를 클러스터링하려고하지만 Firebase의로드 된 데이터 마커로 인해 작동하지 않을 수 있습니다. 다음과 같은 세 가지 문제가 있습니다. - 사용자 지정 마커를 주황색으로 클러스터 할 수 없습니다. -지도가로드 될 때 마커 및 클러스터 아이콘이 나타나지 않습니다. 먼저 확대하거나 축소해야합니다. - 마커의 데이터를 infoWindow에 표시하고 싶습니다. 마커에 올바른 데이터를 사용해야합니다. GoogleMap 및 Firebase에 해당합니다. - 클러스터 아이콘을 클릭하면 alertController도 표시되지만 클러스터 아이콘이 아닌 마커를 탭하면 alertController 만 보입니다.

여기에 내 현재 코드입니다 :

class POIItem: NSObject, GMUClusterItem { 
var position: CLLocationCoordinate2D 
var name: String! 

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

class NewCarteViewController: UIViewController, GMSMapViewDelegate, CLLocationManagerDelegate, GMUClusterManagerDelegate { 

var locationManager = CLLocationManager() 
var positionActuelle = CLLocation() // Another current position 
var currentPosition = CLLocationCoordinate2D() 
var latiti: CLLocationDegrees! 
var longiti: CLLocationDegrees! 

private var clusterManager: GMUClusterManager! // Cluster 
private var maMap: GMSMapView! 
var marker = GMSMarker() 
let geoCoder = CLGeocoder() 

var ref = DatabaseReference() 
var estTouche: Bool! 

override func viewDidLoad() { 
    super.viewDidLoad() 

    locationManager.delegate = self 
    locationManager.requestWhenInUseAuthorization() 

    positionActuelle = locationManager.location! 
    latiti = positionActuelle.coordinate.latitude 
    longiti = positionActuelle.coordinate.longitude 
    currentPosition = CLLocationCoordinate2D(latitude: latiti, longitude: longiti) 

    let camera = GMSCameraPosition.camera(withTarget: currentPosition, zoom: 10) 
    maMap = GMSMapView.map(withFrame: CGRect.zero, camera: camera) 
    maMap.mapType = .normal 
    maMap.settings.compassButton = true 
    maMap.isMyLocationEnabled = true 
    maMap.settings.myLocationButton = true 
    maMap.delegate = self 
    self.view = maMap 

    let iconGenerator = GMUDefaultClusterIconGenerator() 
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm() 
    let renderer = GMUDefaultClusterRenderer(mapView: maMap, clusterIconGenerator: iconGenerator) 
    clusterManager = GMUClusterManager(map: maMap, algorithm: algorithm, renderer: renderer) 

    loadMarker() 
} 

// Download datas of markers from Firebase Database 
func loadMarker() { 
    ref = Database.database().reference() 
    let usersRef = ref.child("markers") 

    usersRef.observeSingleEvent(of: .value, with: { (snapshot) in 
     if (snapshot.value is NSNull) { 
      print("not found") 
     } else { 
      for child in snapshot.children { 
       let userSnap = child as! DataSnapshot 
       let uid = userSnap.key // the uid of each user 
       let userDict = userSnap.value as! [String: AnyObject] 
       let latitudes = userDict["latitudeEvent"] as! Double 
       let longitudes = userDict["longitudeEvent"] as! Double 
       let bellname = userDict["nom"] as! String 
       let belltitre = userDict["titreEvent"] as! String 
       let total = snapshot.childrenCount // Number of markers in Firebase 

       let positionMarker = CLLocationCoordinate2DMake(latitudes, longitudes) 
       var diff = Double(round(100*self.getDistanceMetresBetweenLocationCoordinates(positionMarker, coord2: self.currentPosition))/100) 
       var dif = Double(round(100*diff)/100) 

       var positionEvenement = CLLocation(latitude: latitudes, longitude: longitudes) // Event location 

       // Function in order to convert GPS Coordinate in an address 
CLGeocoder().reverseGeocodeLocation(positionEvenement, completionHandler: {(placemarks, error) -> Void in 

        if error != nil { 
         print("Reverse geocoder a rencontré une erreur " + (error?.localizedDescription)!) 
         return 
        } 

        if (placemarks?.count)! > 0 { 
         print("PlaceMarks \(placemarks?.count)!") 
         let pm = placemarks?[0] as! CLPlacemark 
         var adres = "\(pm.name!), \(pm.postalCode!) \(pm.locality!)" 
         let item = POIItem(position: CLLocationCoordinate2DMake(latitudes, longitudes), name: "") 
         // self.marker.userData = item // I delete this line 
         self.clusterManager.add(item) 
         self.marker = GMSMarker(position: positionMarker) 
         self.marker.icon = UIImage(named: "marker-45") 
         self.marker.title = "\(belltitre)" 
         self.marker.snippet = "Live de \(bellname)\nLieu: \(adres)\nDistance: \(dif) km" 
         self.marker.map = self.maMap 
        } else { 
         print("Problème avec les données reçu par le géocoder") 
        } 
       }) 
      } 
      self.clusterManager.cluster() 
      self.clusterManager.setDelegate(self, mapDelegate: self) 
     } 
    }) 
} 

func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool { 
    if let poiItem = marker.userData as? POIItem { 
     NSLog("Did tap marker for cluster item \(poiItem.name)") 
    } else { 
     NSLog("Did tap a normal marker") 
    } 
    return false 
} 

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

func renderer(_ renderer: GMUClusterRenderer, markerFor object: Any) -> GMSMarker? { 
    let marker = GMSMarker() 
    if let model = object as? POIItem { // POIItem class is your MarkerModel class 
     marker.icon = UIImage(named: "marker-45") // Like this ? 
     // set image view for gmsmarker 
    } 
    return marker 
} 

// Distance between 2 locations 
func getDistanceMetresBetweenLocationCoordinates(_ coord1: CLLocationCoordinate2D, coord2: CLLocationCoordinate2D) -> Double { 
    let location1 = CLLocation(latitude: coord1.latitude, longitude: coord1.longitude) 
    let location2 = CLLocation(latitude: coord2.latitude, longitude: coord2.longitude) 
    var distance = ((location1.distance(from: location2))/1000) 
    return distance 
} 

// Affiche les boutons du live 
func alert(_ sender: AnyObject) { 
    let alertController = UIAlertController(title: "", message: "", preferredStyle: .actionSheet) 
    alertController.title = nil 
    alertController.message = nil 
    alertController.addAction(UIAlertAction(title: "Accéder au live", style: .default, handler: self.accederLive)) 
    alertController.addAction(UIAlertAction(title: "Infos event", style: .default, handler: self.infosEvent)) 
    alertController.addAction(UIAlertAction(title: "Annuler", style: .cancel, handler: nil)) 
    self.present(alertController, animated: true, completion: nil) 
} 

// Display infoWindow and alertController 
func mapView(_ mapView: GMSMapView!, markerInfoWindow marker: GMSMarker!) -> UIView! { 
    let infoWindow = Bundle.main.loadNibNamed("InfoWindow", owner: self, options: nil)?.first! as! CustomInfoWindow 
    self.estTouche = true 
    if self.estTouche == true { 
     self.alert(self.estTouche as AnyObject) 
    } else { 
     print("estTouche est false") 
    } 
    print(self.estTouche) 
    return nil // infoWindow 
} 

미안해 릴 비트 긴 코드 당신이 뭔가 내가

여기 지금 GoogleMap으로의 스크린 샷의 언급을했는데, 알려 이해하지 않는 경우.

첫 번째 스크린 샷은 내가지도를 열 때, 당신은 아무것도지도, 아니 클러스터 아이콘 또는 분리 마커, 이상한에 나타납니다 볼 수 있습니다.

두 번째 스크린 샷은 한 번 확대하면 클러스터 아이콘이 나타나고 하나의 표식이 나타납니다. 내 코드가 잘못되었으므로 사용자가지도보기를 열 때 모든 클러스터 아이콘이나 마커 쇼가 필요합니다. 첫째 loadMarker()는 clusterManager 후에 호출되어야

Answer 1

은 즉 다음

clusterManager.cluster() 
clusterManager.setDelegate(self, mapDelegate: self) 

는 루프가 종료 후 loadMarker() 위해 배치해야

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

초기화된다.

귀하의 viewcontroller이 프로토콜을 준수해야 GMUClusterManagerDelegate 다음 viewcontroller 이러한 2 가지 방법을 추가하십시오.

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 
} 

이 기능을 사용하면 다른 것을 시도해 볼 수 있습니다.

Answer 2

나는 해결책을 게시 할 수 있도록 내 질문을 해결하므로 그의 도움을 Prateek에게 감사드립니다.

너무 그것을 해결하기 위해 나는이 주제를 사용 How to implement GMUClusterRenderer in Swift

먼저 나는 Google지도 파일 SDK에 한 줄의 코드를 변경 : 나는이 경로에서 내 프로젝트에서 그것을 발견 : 포드/포드/구글 Maps- iOS-Utils/Clustering/GMUDefaultClusterRenderer.m 이 파일 이름은 GMUDefaultClusterRenderer.m입니다. 이 changement 그것이

- (void)renderCluster:(id<GMUCluster>)cluster animated:(BOOL)animated { 
... 

    GMSMarker *marker = [self markerWithPosition:item.position 
              from:fromPosition 
             userData:item 
            clusterIcon:[UIImage imageNamed:@"YOUR_CUSTOM_ICON"] // Here you change "nil" by the name of your image icon 
             animated:shouldAnimate]; 
    [_markers addObject:marker]; 
    [_renderedClusterItems addObject:item]; 
... 
} 

둘째, 내지도의 내 스위프트 파일에이 기능을 추가 한 클러스터에 클러스터 사용자 정의 마커 아이콘의 :

private func setupClusterManager() { 
    let iconGenerator = GMUDefaultClusterIconGenerator() 
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm() 
    let renderer = GMUDefaultClusterRenderer(mapView: maMap, 
              clusterIconGenerator: iconGenerator) 

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

} 

셋째, 나는 POIItem 클래스의 변수를 추가 위해 마커의 정보창에 보여, 중포 기지에서 정보를 얻을 수 있습니다 :

class POIItem: NSObject, GMUClusterItem { 
var position: CLLocationCoordinate2D 
var name: String! 
var snippet: String! // I add it here 

init(position: CLLocationCoordinate2D, name: String, snippet: String) { 
    self.position = position 
    self.name = name 
    self.snippet = snippet // I add it also here 
} 
} 

난에 POIItem 클래스에 중포 기지 감사에서 마커의 정보를 얻을 수 (나는 중포 기지에서 각 마커의 데이터를로드하기 위해 함수 loadMarker()를 호출하기 전에) 함수 다음

func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool { 
    if let poiItem = marker.userData as? POIItem { 
     NSLog("Did tap marker for cluster item \(poiItem.name!)") 
     marker.title = "\(poiItem.name!)" 
     marker.snippet = "\(poiItem.snippet!)" 
     self.estTouche = true 
     if self.estTouche == true { 
      self.alert(self.estTouche as AnyObject) // If true it shows an alertController 
     } else { 
      print("estTouche est false") 
     } 
      print(self.estTouche) 
    } else { 
     NSLog("Did tap a normal marker") 
    } 
    return false 
} 

여기에 솔루션의 전체 코드의를, 나를 위해 잘 작동합니다.

import UIKit 
import GoogleMaps 
import CoreLocation 
import Firebase 
import FirebaseAuth 
import FirebaseDatabase 

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

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

class NewCarteViewController: UIViewController, GMSMapViewDelegate, CLLocationManagerDelegate, GMUClusterManagerDelegate { 

var locationManager = CLLocationManager() 
var positionActuelle = CLLocation() 
var positionEvent = CLLocationCoordinate2D() 
var currentPosition = CLLocationCoordinate2D() 
var latiti: CLLocationDegrees! 
var longiti: CLLocationDegrees! 

private var clusterManager: GMUClusterManager! // Cluster 

private var maMap: GMSMapView! 
var marker = GMSMarker() 

var ref = DatabaseReference() // Firebase reference 
var estTouche: Bool! 
let geoCoder = CLGeocoder() 

// For load the map 
override func loadView() { 
    let camera = GMSCameraPosition.camera(withLatitude: 48.898902, 
             longitude: 2.282664, zoom: 12) 
    maMap = GMSMapView.map(withFrame: CGRect.zero, camera: camera) 
    self.view = maMap 
} 

override func viewDidLoad() { 
    super.viewDidLoad() 
    let iconGenerator = GMUDefaultClusterIconGenerator() 
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm() // crée un gestionnaire de groupes utilisant l'algorithme 
    let renderer = GMUDefaultClusterRenderer(mapView: maMap, clusterIconGenerator: iconGenerator) // Le renderer est le moteur de rendu des groupes 
    clusterManager = GMUClusterManager(map: maMap, algorithm: algorithm, renderer: renderer) 

    loadMarker() 

    locationManager.delegate = self 
    locationManager.requestWhenInUseAuthorization() 

    positionActuelle = locationManager.location! 
    latiti = positionActuelle.coordinate.latitude 
    longiti = positionActuelle.coordinate.longitude 

    currentPosition = CLLocationCoordinate2D(latitude: latiti, longitude: longiti) 

    maMap.mapType = .normal 
    maMap.settings.compassButton = true // Boussole 
    maMap.isMyLocationEnabled = true // User current position icon 
    maMap.settings.myLocationButton = true // Button for center the camera on the user current position 
    maMap.delegate = self 
} 

// Download datas of markers from Firebase Database 
    func loadMarker() { 
    ref = Database.database().reference() 
    let usersRef = ref.child("markers") 

    usersRef.observeSingleEvent(of: .value, with: { (snapshot) in 
     if (snapshot.value is NSNull) { 
      print("not found") 
     } else { 
      for child in snapshot.children { 
       let userSnap = child as! DataSnapshot 
       let uid = userSnap.key // The uid of each user 
       let userDict = userSnap.value as! [String: AnyObject] // Child data 
       let latitudes = userDict["latitudeEvent"] as! Double 
       let longitudes = userDict["longitudeEvent"] as! Double 
       let bellname = userDict["nom"] as! String 
       let belltitre = userDict["titreEvent"] as! String 
       let total = snapshot.childrenCount // Count of markers save in my Firebase database 
       print("Total de marqueurs : \(total)") 

       let positionMarker = CLLocationCoordinate2DMake(bellatitude, bellongitude) 
       var diff = Double(round(100*self.getDistanceMetresBetweenLocationCoordinates(positionMarker, coord2: self.currentPosition))/100) 
       var dif = Double(round(100*diff)/100) 

       var positionEvenement = CLLocation(latitude: latitudes, longitude: longitudes) 

       // Function in order to convert GPS Coordinate in an address 
       CLGeocoder().reverseGeocodeLocation(positionEvenement, completionHandler: {(placemarks, error) -> Void in 

        if error != nil { 
         print("Reverse geocoder meets error " + (error?.localizedDescription)!) 
         return 
        } 

        if (placemarks?.count)! > 0 { 
         print("PlaceMarks \((placemarks?.count)!)") 
         let pm = placemarks?[0] as! CLPlacemark 
         var adres = "\(pm.name!), \(pm.postalCode!) \(pm.locality!)" 
         let item = POIItem(position: CLLocationCoordinate2DMake(latitudes, longitudes), name: "\(belltitre)", snippet: "Live de \(bellname)\nLieu: \(adres)\nDistance: \(dif) km") // This line is very important in order to import data from Firebase and show in infoWindow for the right datas for each markers 
         self.clusterManager.add(item) 
         self.clusterManager.cluster() 
         self.clusterManager.setDelegate(self, mapDelegate: self) 
        } else { 
         print("Problème avec les données reçues par le géocoder") 
        } 
       }) 
      } 
     } 
    }) 
} 

func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool { 
    if let poiItem = marker.userData as? POIItem { 
     NSLog("Did tap marker for cluster item \(poiItem.name!)") 
     marker.title = "\(poiItem.name!)" // Title of the marker infoWindow (title from Firebase) 
     marker.snippet = "\(poiItem.snippet!)" // Same for snippet 
     self.estTouche = true 
     if self.estTouche == true { 
      self.alert(self.estTouche as AnyObject) // Show the alertController because infoWindows can't use button 
     } else { 
      print("estTouche est false") 
     } 
      print(self.estTouche) 
    } else { 
     NSLog("Did tap a normal marker") 
    } 
    return false 
} 

// If I tap a cluster icon, it zoom in +1 
func clusterManager(_ clusterManager: GMUClusterManager, didTap cluster: GMUCluster) -> Bool { 
    let newCamera = GMSCameraPosition.camera(withTarget: cluster.position, zoom: maMap.camera.zoom + 1) 
    let update = GMSCameraUpdate.setCamera(newCamera) 
    maMap.moveCamera(update) 
    return false 
} 

private func setupClusterManager() { 
    let iconGenerator = GMUDefaultClusterIconGenerator() 
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm() 
    let renderer = GMUDefaultClusterRenderer(mapView: maMap, 
              clusterIconGenerator: iconGenerator) 

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

} 

func renderer(_ renderer: GMUClusterRenderer, markerFor object: Any) -> GMSMarker? { 
    if let model = object as? POIItem { 
     self.clusterManager.cluster() 
     self.clusterManager.setDelegate(self, mapDelegate: self) 
    } 
    return nil 
} 

// Distance between 2 locations 
func getDistanceMetresBetweenLocationCoordinates(_ coord1: CLLocationCoordinate2D, coord2: CLLocationCoordinate2D) -> Double { 
    let location1 = CLLocation(latitude: coord1.latitude, longitude: coord1.longitude) 
    let location2 = CLLocation(latitude: coord2.latitude, longitude: coord2.longitude) 
    var distance = ((location1.distance(from: location2))/1000) 
    return distance 
} 

// Show alertController with 2 buttons and a Cancel button 
func alert(_ sender: AnyObject) { 
    let alertController = UIAlertController(title: "", message: "", preferredStyle: .actionSheet) // Ne me donne pas le bon nom 
    alertController.title = nil 
    alertController.message = nil // Supprime la ligne message sous le titre afin de pouvoir centrer le titre 
    alertController.addAction(UIAlertAction(title: "Accéder au live", style: .default, handler: self.accederLive)) 
    alertController.addAction(UIAlertAction(title: "Infos event", style: .default, handler: self.infosEvent)) // Ou Affichage du profil utilisateur 
    alertController.addAction(UIAlertAction(title: "Annuler", style: .cancel, handler: nil)) 
    self.present(alertController, animated: true, completion: nil) 
} 

// The two following functions are used in alertController 
func accederLive(_ sender: AnyObject) { 
... 
} 

func infosEvent(_ sender: AnyObject) { 
    let vc = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "Event") 
    present(vc, animated: true, completion: nil) 
} 

func mapView(_ mapView: GMSMapView!, markerInfoWindow marker: GMSMarker!) -> UIView! { 
    let infoWindow = Bundle.main.loadNibNamed("InfoWindow", owner: self, options: nil)?.first! as! CustomInfoWindow 
    return nil 
} 
} 

다른 사람에게 도움이되기를 바랍니다.

var locationManage = CLLocationManager() 
var positionActuel = CLLocation() // Current position of user 
var latitudinale: CLLocationDegrees! // Latitude 
var longitudinale: CLLocationDegrees! // Longitude 
var m = GMSMarker() 

class AddEventViewController: UIViewController, UISearchBarDelegate, GMSMapViewDelegate, CLLocationManagerDelegate { 

var categorie: String! // Type of event 
var titre: String! // Title of event 
var name: String! // Username 

var userId = Auth.auth().currentUser?.uid // Get the uid of the connected user in Firebase 

@IBOutlet weak var titreTextField: UITextField! // TextField in where user can set a title 

override func viewDidLoad() { 
    super.viewDidLoad() 
... 

    locationManage.delegate = self 
    locationManage.requestWhenInUseAuthorization() 

    positionActuel = locationManage.location! 
    latitudinale = positionActuel.coordinate.latitude 
    longitudinale = positionActuel.coordinate.longitude 

    name = Auth.auth().currentUser?.displayName // In order to get the username of the connected user in Firebase 
} 

@IBAction func goAction(_ sender: Any) { 
    let vc = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "Live") 
    self.present(vc, animated: true, completion: nil) 

    if titreTextField.text == "" { 
     titre = "\(name!) Live \(categorie!)" 
    } else { 
     titre = titreTextField.text! 
    } 

    setMarker(marker: m) // Add a marker on the map 
} 

// Save data of this event in Firebase (and this marker on Firebase) 
func setMarker(marker: GMSMarker) { 
    var lati = latitudinale 
    var longi = longitudinale 
    var nom = self.name 
    var title = self.titre 

    var userMarker = ["nom": nom!, // User name 
     "latitudeEvent": lati!, // Latitude of event 
     "longitudeEvent": longi!, // Longitude of event 
     "titreEvent": title!] as [String : AnyObject] // Title of event 

    KeychainWrapper.standard.set(userId!, forKey: "uid") 

    let emplacement = Database.database().reference().child("markers").child(userId!) // Reference of my Firebase Database 
    emplacement.setValue(userMarker) 
} 
}