自定义 UIView 上的 Google 地图 GMSMapView

Question

我想在添加到self.view 的视图上显示谷歌地图，而不是直接在self.view 上绘制地图。因此，我在故事板中创建了一个视图并将其类更改为GMSMapView。我还创建了一个到该视图的出口连接，名为gmView。

我正在使用以下代码，但遗憾的是没有显示地图：

let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: GMSCameraPosition.camera(withLatitude: 51.050657, longitude: 10.649514, zoom: 5.5))
gmView = mapView

另外，我尝试将mapView 添加到self.view 作为子视图，如下所示：

self.view.addSubview(mapView)

...并插入它：

self.view.insertSubview(mapView, at: 0)

请注意，如果有任何改变，我将使用自动布局。

这些方法似乎都不适合我。
有什么想法吗？

Answer 1

如果你想在加载view之后添加一个mapView，那么你需要创建一个GMSMapView的对象。所以打破你的mapView 的出口，因为它是动态创建的。

import UIKit
import GoogleMaps

class MapViewController: UIViewController {

    //Take a Google Map Object. Don't make outlet from Storyboard, Break the outlet of GMSMapView if you made an outlet
    var mapView:GMSMapView?

    override func viewDidLoad() {

        super.viewDidLoad()

        mapView = GMSMapView.map(withFrame: CGRect(x: 100, y: 100, width: 200, height: 200), camera: GMSCameraPosition.camera(withLatitude: 51.050657, longitude: 10.649514, zoom: 5.5))

        //so the mapView is of width 200, height 200 and its center is same as center of the self.view
        mapView?.center = self.view.center

        self.view.addSubview(mapView!)

    }
}

这是输出。 mapView 的宽度 = 200，高度 = 200，中心与 self.view 相同

Answer 2

我终于想出了如何在 Storyboard 中创建的 UIView 中显示地图并将其居中于特定位置。

注意：创建 UIView 插座后，我将其类更改为 GMSMapView，如前所述。

import UIKit
import GoogleMaps

class ViewController: UIViewController {

    @IBOutlet weak var searchBar: UISearchBar!
    @IBOutlet weak var toolBar: UIToolbar!
    @IBOutlet weak var mapView: GMSMapView!

    override func viewDidLoad() {

        super.viewDidLoad()

        let camera = GMSCameraPosition.camera(withLatitude: 52.520736, longitude: 13.409423, zoom: 12)
        self.mapView.camera = camera

        let initialLocation = CLLocationCoordinate2DMake(52.520736, 13.409423)
        let marker = GMSMarker(position: initialLocation)
        marker.title = "Berlin"
        marker.map = mapView

    }

这是输出： Map centred in Berlin

Answer 3

非常简单。使用以下步骤

1) 打开 Storyboard：从您的 ViewController 中的 Object 库中拖放一个 UIView。

2) 在您的班级中制作自定义视图插座。 （我的代码中的 viewForGMap）

3) 在您的课程中添加以下代码行。

class GMapVC: UIViewController {

@IBOutlet weak var viewForGMap: UIView!

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.

    let camera = GMSCameraPosition.camera(withLatitude: 28.7041, longitude: 77.1025, zoom: 10.0)
    let mapView = GMSMapView.map(withFrame: self.viewForGMap.frame, camera: camera)
    self.view.addSubview(mapView)

    // Creates a marker in the center of the map.
    let marker = GMSMarker()
    marker.position = CLLocationCoordinate2D(latitude: 28.7041, longitude: 77.1025)
    marker.title = "Delhi"
    marker.snippet = "India’s capital"
    marker.map = mapView

   }

输出：

Answer 4

您可以在布局中放置一个空白 UIView，并将其在检查器中的类设置为 GMSMapView。您无需以编程方式对其进行实例化。

然后只需通过插座获取视图的参考并设置您的坐标/相机。

Answer 5

这是一种非常简单的方法，可以将 Google 地图连接到情节提要中 ViewController 中的 View（Swift 4.2，Xcode 10）。

我打电话给我的ViewControllerMapLocationsViewController。

1234563

1. 接下来，将 View 对象拖到该 ViewController 上，并将该类设置为 GMSMapView。

2. 将View 对象与代码中的@IBOutlet 挂钩（在我的示例中我将其命名为viewForGoogleMap）。

这是一个简约的示例代码：

import UIKit
import GoogleMaps
class MapLocationsViewController: UIViewController {
    @IBOutlet weak var viewForGoogleMap: GMSMapView!
    override func viewDidLoad() {
        super.viewDidLoad()
        let mapView = GMSMapView(frame: self.view.bounds)
        viewForGoogleMap.addSubview(mapView)
    }
}

如需更多信息，请查看Google Maps docs。

Answer 6

CGRect.zero 将返回一个零高度和零宽度的视图。它将是不可见的。

此外，如果您想自己分配，将其添加到情节提要中也没有任何意义。相反，您应该只以编程方式创建视图控制器的属性，并将其框架设置为您想要的任何内容。

注意，当您调用 'addSubview' 到视图时，它将始终添加到视图的顶部，因此无需将其插入给定索引处。使用自动布局很好，但 viewDidLoad() 在设置所有约束之前被调用。如果您希望能够设置 mapView 的 frame = self.view，则可以改为在 viewDidAppear() 中进行。

Answer 7

我们可以在 iOS 中使用 zPosition。

如果我们有一个名为 salonDetailView 的视图，例如：

@IBOutlet weak var salonDetailView: UIView!

in my case see the image

并有用于 GMSMapView 的 UIView，例如：

@IBOutlet weak var mapViewUI: GMSMapView!

要显示 mapViewUI 上方的 salonDetailView，请使用 zPosition，如下所示：

salonDetailView.layer.zPosition = 1

Answer 8

这些答案对我来说并不如我所愿。作为对@Rajan 答案的改进，我想将 UIView 添加到带有所需约束的情节提要 View Controller 中。然后我在其中添加了另一个 UIView 作为孩子，然后我将类名更改为 GMSMapView。之后，我为 UIViewController 创建了一个 Outlet。

@IBOutlet weak var GMSMap: GMSMapView!

override func viewDidLoad() {
    super.viewDidLoad()
    let mapView = GMSMapView.map(withFrame: GMSMap.frame, camera: GMSCameraPosition.camera(withLatitude: 6.9271, longitude: 79.8612, zoom: 10))
    let marker = GMSMarker()

    marker.position = CLLocationCoordinate2D(latitude: 6.9271, longitude: 79.8612)
    marker.title = "Colombo"
    marker.snippet = "Sri Lanka"
    marker.map = mapView
    self.view.addSubview(mapView)

}