在自定义UIView上使用Google Maps 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)

注意我正在使用自动布局，如果有什么不同请说明。

这些方法似乎都对我无效。
有任何想法吗？

- LinusGeffarth

---

如果您已经创建了一个outlet，为什么还需要再次分配mapView呢？在您的同一“gmView”中完成这些操作。 - Rajan Maheshwari

Answer 1

我终于找到了如何在Storyboard中创建的UIView中显示地图并将其居中显示在指定位置的方法。

注意：在创建了UIView outlet之后，按照之前所述的方法将其类更改为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

    }

这是输出结果：

以柏林为中心的地图

- celiux

---

self.mapView.camera = camera // 这是重要的一行 - Anup Gupta

Answer 2

如果您想在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相同。

- Rajan Maheshwari

Answer 3

非常简单。按照以下步骤操作

1）打开Storyboard：从Object库中将UIView拖到您的ViewController中。

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

   }

输出：

- Devendra Singh

Answer 4

您可以在布局中放置一个空的UIView，并将其类设置为GMSMapView。您不需要以编程方式实例化它。

然后，只需通过outlet引用视图并设置您的坐标/相机即可。

- mylovemhz

---

这个！！！它也解决了很多自动布局和iPhone Plus的问题！ - Jan

谢谢。这基本上适用于扩展UIView类的任何内容，因此这是使用故事板和自动布局与自定义视图最简单的方法。 - mylovemhz

Answer 5

这是一种非常简单的方法，可以在Storyboard中的ViewController中（Swift 4.2，Xcode 10）将Google Maps连接到一个View。我将我的ViewController称为MapLocationsViewController。

1. 因此，在您的故事板中，请确保您的ViewController上的类正确引用了您的正确类（在我的示例中为MapLocationsViewController）。

2. 接下来，将一个View对象拖放到该视图控制器上，并将其类设置为GMSMapView。

3. 将该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文档。

- user3773048

Answer 6

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

此外，如果您想要进行自己的分配，将其添加到故事板中并没有太多意义。相反，您应该通过编程方式创建视图控制器的属性，并将其框架设置为您想要的任何内容。

请注意，当您调用“addSubview”来向一个视图添加子视图时，它将始终添加到视图的顶部，因此不需要按给定索引插入它。使用自动布局很好，但是viewDidLoad（）在设置所有约束之前被调用。如果您想能够将mapView的frame = self.view设置为相同大小，您应该在viewDidAppear（）中执行该操作。

- Brad Hesse

Answer 7

那些答案对我没有帮助。作为对@Rajan答案的改进，我考虑在 storyboard 的 View Controller 中添加一个 UIView 并加入所需的约束条件。然后在其中加入另一个 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)

}

- Wimukthi Rajapaksha

Answer 8

我们可以在iOS中使用zPosition。

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

@IBOutlet weak var salonDetailView: UIView!

在我的情况下，请参见图像

并且对于GMSMapView，有UIView，例如：

@IBOutlet weak var mapViewUI: GMSMapView!

要在地图视图UI上方显示salonDetailView，请使用以下zPosition：

salonDetailView.layer.zPosition = 1

- abhijith k