快速在Google Map中自定义标记 [英] Custom Marker in Google Map in swift

问题描述

我试图在单击Google地图中的图钉时显示我的自定义视图.我已经在xib文件中为它的自定义视图疯狂了，并在func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {的委托方法中调用了该文件，但是当我运行该应用程序并点击标记时，它不显示我的视图.我该怎么显示?这是我的自定义Xib文件的代码，

I'm trying to show my custom view on click of pin in google map. I have mad my custom view for it in xib file and call that file in the delegate method of func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool { But when i run the app and tap the marker it does not show my view. How can i show this? This is my code for custom Xib file,

class MapMarkerWindow: UIView {

    @IBOutlet weak var saloonImage: UIImageView!
    @IBOutlet weak var nameLbl: UILabel!
    @IBOutlet weak var addressLbl: UILabel!
    @IBOutlet weak var descriptionLbl: UILabel!
    var spotData: NSDictionary?


    class func instanceFromNib() -> UIView {
        return UINib(nibName: "MapMarkerWindowView", bundle: nil).instantiate(withOwner: self, options: nil).first as! UIView     
    }
}

这是我在VC中显示地图的代码，

This is the code in my VC where i'm showing my map,

@IBOutlet weak var customView: UIView!

var mapView : GMSMapView?
var locationManager = CLLocationManager()
private var infoWindow = MapMarkerWindow()
fileprivate var locationMarker : GMSMarker? = GMSMarker()

override func viewDidLoad() {
    super.viewDidLoad()

    self.infoWindow = loadNiB()
    GMSServices.provideAPIKey("AIzaSyBMppjEPlRBHUD4To2KqNLgmhu1QcxHg3g")

    let camera = GMSCameraPosition.camera(withLatitude: 31.516331, longitude: 74.342792, zoom: 6)

    mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    view = mapView

    let states = [
        State(name: "Hafeez Center", long: 74.342792, lat: 31.516331, snippets: "Lahore"),
        State(name: "Kalma Chowk", long: 74.331553, lat: 31.504532, snippets: "Lahore"),
        // the other 51 states here...
    ]

    for state in states {
        let state_marker = GMSMarker()
        state_marker.position = CLLocationCoordinate2D(latitude: state.lat, longitude: state.long)
        state_marker.title = state.name
        state_marker.snippet = "Hey, this is \(state.snippets)"
        state_marker.map = mapView
    }

    self.mapView?.isMyLocationEnabled = true

    //Location Manager code to fetch current location
    self.locationManager.delegate = self
    self.locationManager.startUpdatingLocation()
}

func loadNiB() -> MapMarkerWindow {
    let infoWindow = MapMarkerWindow.instanceFromNib() as! MapMarkerWindow
    return infoWindow
}

//Location Manager delegates
private func locationManager(manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {

    let location = locations.last

    let camera = GMSCameraPosition.camera(withLatitude: (location?.coordinate.latitude)!, longitude: (location?.coordinate.longitude)!, zoom: 17.0)

    self.mapView?.animate(to: camera)

    //Finally stop updating location otherwise it will come again and again in this delegate
    self.locationManager.stopUpdatingLocation()

}
func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {
    var markerData : NSDictionary?
    if let data = marker.userData! as? NSDictionary {
        markerData = data
    }
    locationMarker = marker
    infoWindow.removeFromSuperview()
    infoWindow = loadNiB()
    guard let location = locationMarker?.position else {
        print("locationMarker is nil")
        return false
    }
    // Pass the spot data to the info window, and set its delegate to self
    infoWindow.spotData = markerData
    //infoWindow.delegate = self
    // Configure UI properties of info window
    infoWindow.alpha = 0.9
    infoWindow.layer.cornerRadius = 12
    infoWindow.layer.borderWidth = 2
    //infoWindow.infoButton.layer.cornerRadius = infoWindow.infoButton.frame.height / 2
    let saloonImage = markerData!["image"]!
    let name = markerData!["name"]!
    let address = markerData!["address"]!
    let description = markerData!["description"]!

    infoWindow.addressLbl.text = address as? String
    infoWindow.nameLbl.text = name as? String
    infoWindow.descriptionLbl.text = description as? String
    infoWindow.saloonImage.image = saloonImage as? UIImage
    //Offset the info window to be directly above the tapped marker
    infoWindow.center = mapView.projection.point(for: location)
    infoWindow.center.y = infoWindow.center.y - 82
    self.view.addSubview(infoWindow)
    return false
}

func mapView(_ mapView: GMSMapView, didChange position: GMSCameraPosition) {
    if (locationMarker != nil){
        guard let location = locationMarker?.position else {
            print("locationMarker is nil")
            return
        }
        infoWindow.center = mapView.projection.point(for: location)
        infoWindow.center.y = infoWindow.center.y - 82
    }
}

func mapView(_ mapView: GMSMapView, didTapAt coordinate: CLLocationCoordinate2D) {
    infoWindow.removeFromSuperview()
}

这是我点击图钉时的样子.

This is how my pin looks when i tap on it.

推荐答案

从您的代码中看，加载Nib似乎有问题.

From your code it seems that there is a problem in loading Nib.

请检查以下代码.

    func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {
        self.tappedmarker = marker
        var point = mapView.projection.point(for: marker.position)
        point.y = point.y - 110
        let camera = mapView.projection.coordinate(for: point)
        let position = GMSCameraUpdate.setTarget(camera)
        mapView.animate(with: position)

        self.customMarker = CustomMarker.instancefromNib() as! CustomMarker
        customMarker.layer.cornerRadius = 10.0
        customMarker.clipsToBounds = true

        self.customMarker.center = mapView.projection.point(for: marker.position)
        self.customMarker.center.y = self.customMarker.center.y - 110
        self.view.addSubview(self.customMarker)
        self.customMarker.bringSubview(toFront: self.view)

        return true
    }

    func mapView(_ mapView: GMSMapView, didChange position: GMSCameraPosition) {
        if (tappedmarker != nil) {
            guard let location = tappedmarker?.position else {
                print("locationMarker is nil")
                return
            }
            customMarker.center = mapView.projection.point(for: location)
            customMarker.center.y = customMarker.center.y - 100
        }
    }

    func mapView(_ mapView: GMSMapView, didTapAt coordinate: CLLocationCoordinate2D) {
        if self.view.subviews .contains(self.customMarker) {
            self.customMarker.removeFromSuperview()
            return
        }
    }

这是来自Nib的实例:

Here is the instancefromNib :

   class CustomMarker: UIView {

    @IBOutlet weak var lblTitle: UILabel!

    class func instancefromNib() -> UIView {
        return UINib.init(nibName: "CustomMarker", bundle: nil).instantiate(withOwner: self, options: nil).first as! UIView
    }

}

这看起来像这样:

希望这会有所帮助！

这篇关于快速在Google Map中自定义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！