微信sdk swift版_使用Swift 4的iOS版Google Maps SDK终极指南

微信sdk swift版

by Dejan Atanasov

通过Dejan Atanasov

使用Swift 4的iOS版Google Maps SDK终极指南 (Your ultimate guide to the Google Maps SDK on iOS, using Swift 4)

Many iOS apps use Google Maps. This is a very common feature, so I have decided to prepare an ultimate guide on the Google Maps SDK for iOS. This tutorial covers everything that you might need to know.

许多iOS应用程序都使用Google Maps。 这是一个非常常见的功能,因此我决定在iOS版Google Maps SDK上准备最终指南。 本教程涵盖了您可能需要了解的所有内容。

I hope that my readers will request features, so I can expand this article. Everything will be documented in this post! ?

我希望我的读者会要求提供功能,因此我可以扩展本文。 一切都会记录在这篇文章中! ?

安装 (Installation)

Before we start coding, we must install the Google Maps iOS SDK first. You might prefer some other dependency manager, but I would recommend CocoaPods.

在开始编码之前,我们必须先安装Google Maps iOS SDK。 您可能更喜欢其他依赖管理器,但我建议使用CocoaPods

Create a Podfile inside your project root directory, and copy the following code:

在项目根目录中创建Podfile,然后复制以下代码:

source 'https://github.com/CocoaPods/Specs.git'target 'YOUR_TARGET_NAME' do  pod 'GoogleMaps'end

All you need to do is changing the YOUR_TARGET_NAME string with a real value. Save the file and close it. Open the terminal and cd to the root directory of the project, then type pod install. You're done! ?

您需要做的就是用真实值更改YOUR_TARGET_NAME字符串。 保存文件并关闭它。 打开终端,并cd到项目的根目录,然后键入pod install 。 你完成了! ?

获取API密钥 (Get an API key)

To use the Google Maps iOS SDK, you will need an API Key. To generate the key you will need to visit the Google API Console. Create a project, and navigate to ‘Credentials’.

要使用Google Maps iOS SDK,您需要一个API密钥。 要生成密钥,您需要访问Google API控制台 。 创建一个项目,然后导航到“凭据”。

Then, click ‘Generate Credentials’ and pick API Key. You will need to provide your projects bundle id. The key is generated by the unique bundle id, so if it’s changed, the Google Maps services won’t work!

然后,点击“生成凭据” 并选择API密钥。 您将需要提供您的项目包ID。 密钥是由唯一的捆绑包ID生成的,因此,如果更改了捆绑包ID,则Google Maps服务将无法使用

Go to your project, and in your AppDelegate.swift class add import GoogleMaps. Then, copy the following code to application(_:didFinishLaunchingWithOptions:)

转到您的项目,然后在AppDelegate.swift类中添加import GoogleMaps 。 然后,将以下代码复制到application(_:didFinishLaunchingWithOptions:)

GMSServices.provideAPIKey("YOUR_API_KEY")

Step 1 — Add a map (Step 1 — Add a map)

I will start by showing you how to set up the map together with a basic marker. The code that you will see here is tested in parallel as I write.

首先,我将向您展示如何设置地图以及基本标记。 在编写本文时,将并行测试您在此处看到的代码。

Let’s start! ?

开始吧! ?

Visit your UIViewController (where you need to add the map). Create a custom UIView with the size you need. Assign the GMSMapView class as a Custom Class to the UIView (see the screenshot below). Also, don't forget to connect the delegate.

访问您的UIViewController(您需要在其中添加地图)。 创建具有所需大小的自定义UIView。 将GMSMapView类作为自定义类分配给UIView(请参见下面的屏幕截图)。 另外,不要忘记连接代理。

最后,一些代码! (Finally, some code!)

Let’s get back to the UIViewController and write some code. ⌨️ ️In the below snippet, I have added the whole class so you can get a better picture of what is going on.

让我们回到UIViewController并编写一些代码。 the️️在下面的代码片段中,我添加了整个课程,以便您可以更好地了解正在发生的事情。

GMSCameraPosition tells the map which coordinates to take as a center point. To show a simple marker on the map, use the showMarker() function.

GMSCameraPosition告诉地图以哪个坐标为中心。 要在地图上显示简单的标记,请使用showMarker()函数。

At the end of the file, add an extension which will “store” the GMSMapViewDelegate methods that we need.

在文件末尾,添加一个扩展名 ,该扩展名将“存储”我们所需的GMSMapViewDelegate方法。

第2步-委托方法 (Step 2 — Delegate methods)

I will now introduce you to some GMSMapViewDelegate methods and their powers. ✊

现在,我将向您介绍一些GMSMapViewDelegate方法及其功能。 ✊

GMSMarker信息窗口 (GMSMarker InfoWindow)

In Google Maps, an InfoWindow is a popup window with extra information about a given location. It is displayed when the user taps on the marker we added above.

在Google Maps中,InfoWindow是一个弹出窗口,其中包含有关给定位置的其他信息。 当用户点击我们上面添加的标记时,将显示它。

Our InfoWindow is customizable. You can attach your own UIView with whatever components you need.

我们的InfoWindow是可定制的。 您可以将自己的UIView与所需的任何组件连接在一起。

I have written an example implementation. This assumes in most cases people will use a custom InfoWindow,

我已经写了一个示例实现。 假设大多数情况下,人们会使用自定义的InfoWindow,

  • didTapInfoWindowOf() detects when the user taps on the InfoWindow.

    didTapInfoWindowOf()检测用户何时didTapInfoWindowOf() InfoWindow。

  • markerInfoWindow() adds the custom UIView that we want to show to the marker.

    markerInfoWindow()将要显示的自定义UIView添加到标记中。

  • didLongPressInfoWindowOf() detects when the InfoWindow has been long pressed.

    didLongPressInfoWindowOf()检测何时长时间按下InfoWindow。

拖动GMSMarker (Drag GMSMarker)

Another interesting feature in GMSMapViewDelegate is the ability to drag the marker. This can be achieved with a minimal amount of code.

GMSMapViewDelegate中的另一个有趣的功能是能够拖动标记。 这可以用最少的代码来实现。

All you have to do is turn on the “switch”, by calling marker.isDragabble=trueon the marker created above.

您所要做的就是通过在上面创建的标记上调用marker.isDragabble=true来打开“开关”。

In order to drag the marker, you will need to use a long press. If you need to be notified when the user starts and ends dragging, you can implement these three delegate methods:

为了拖动标记,您需要长按。 如果需要在用户开始和结束拖动时收到通知,则可以实现以下三种委托方法:

  • didBeginDragging notifies once — when the dragging has started.

    didBeginDragging通知一次-拖动开始时。

  • didDrag notifies while the marker is being dragged.

    在拖动标记时, didDrag会通知。

  • didEndDragging notifies once — when the dragging has ended.

    didEndDragging通知一次-拖动结束时。

GMSMarker位置 (GMSMarker position)

What if you need to change the GMSMarker position while the user is tapping on the map? Well, GMSMapViewDelegate offers a solution for that as well. A single delegate method can intercept the coordinates (latitude and longitude) of the tapped area. It will then assign their values to the marker.

如果在用户点击地图时需要更改GMSMarker位置怎么办? 好吧, GMSMapViewDelegate为此提供了一个解决方案。 单个委托方法可以拦截点击区域的坐标(纬度和经度)。 然后它将它们的值分配给标记。

  • didTapAt() returns the coordinate from the tapped area on the map

    didTapAt()返回地图上点击区域的坐标

第3步-添加形状 (Step 3 — Adding shapes)

The Google Maps iOS SDK makes it simple to draw a shape. I will cover how to draw with polylines, polygons and circles.

Google Maps iOS SDK使绘制形状变得简单。 我将介绍如何使用折线,多边形和圆形进行绘制。

折线 (Polylines)

Shapes can be built using lines. We can draw lines in Google Maps using ‘polylines’. The object that will help us with the drawing is called GMSPolyline.

可以使用线来构建形状。 我们可以使用“折线”在Google地图中绘制线。 将帮助我们进行绘制的对象称为GMSPolyline

To create a polyline, you will need to create a path using GMSMutablePath. It needs two or more points to start creating a path.

要创建折线,您将需要使用GMSMutablePath创建路径。 它需要两个或多个点才能开始创建路径。

If you have used the above example, you will get a rectangular shape like the one shown.

如果您使用了上面的示例,则将得到一个如图所示的矩形。

Some other useful tips:

其他一些有用的提示:

  • To remove a polyline from the map, call mapView.clear().

    要从地图中删除折线,请调用mapView.clear()

  • You can change the color of the line by using polyline.strokeColor=.black.

    您可以使用polyline.strokeColor=.black更改线条的颜色。

  • Change the width of the line by calling polyline.strokeWidth=3.

    通过调用polyline.strokeWidth=3更改线的宽度。

多边形 (Polygon)

Polygon is almost the same as polylines. It works using the same approach, with a few minor differences.

多边形与折线几乎相同。 它使用相同的方法工作,但有一些细微的差异。

For example, GMSPolygonwill draw a shape. You can then use fillColor to fill in the drawn area. Here is an example of what this looks like.

例如, GMSPolygon将绘制形状。 然后,您可以使用fillColor填充绘制的区域。 这是一个看起来像的例子。

半径(圆) (Radius (circle))

The final shape we will look at is a circle. This is probably the easiest shape of all, since it’s always the same!

我们将看到的最终形状是一个圆形。 这可能是所有形状中最简单的形状,因为它总是一样!

To achieve this, we need to use theGMSCircle class. Here, we are not passing a path. Instead, we use one coordinate to specify the circle’s center. We also define a radius (measured in meters).

为此,我们需要使用GMSCircle类。 在这里,我们没有通过路径。 相反,我们使用一个坐标来指定圆的中心。 我们还定义了半径(以米为单位)。

TheGMSCircle class contains the same properties as the polygon, includingfillColor , strokeColor and strokeWidth.

GMSCircle类包含与多边形相同的属性,包括fillColorstrokeColorstrokeWidth

第4步-属性和设置 (Step 4 — Properties and Settings)

This part will cover a few properties and settings that are often used when using Google Maps in your app. Let’s take a look at them.

本部分将介绍一些在应用程序中使用Google Maps时经常使用的属性和设置。 让我们看看它们。

更改标记图标 (Change marker icon)

The GMSMarkercontains two different properties for changing the marker icon.

GMSMarker包含两个用于更改标记图标的不同属性。

  • marker.icon=UIImage(named: "image.png") in this approach, you pass an image filename. This replaces the default one.

    marker.icon=UIImage(named: "image.png")在这种方法中,您传递图像文件名。 这将替换默认值。

  • marker.iconView=customView You can also add a custom view instead of an image. This can be used for more complex markers. For example, you may want to add some animation, or multiple components (instead of a single image). Note the icon property gets overwritten when iconView is called.

    marker.iconView=customView您也可以添加自定义视图而不是图像。 这可以用于更复杂的标记。 例如,您可能想要添加一些动画或多个组件(而不是单个图像)。 请注意,调用iconViewicon属性将被覆盖。

添加“我的位置”按钮 (Add ‘My Location’ button)

The ‘My Location’ button appears in the bottom right corner. Clicking the button will animate the map to show the user’s current location.

“我的位置”按钮显示在右下角。 单击该按钮将为地图设置动画以显示用户的当前位置。

To add this, set mapView.settings.myLocationButton = true. The button will appear.

要添加此内容,请设置mapView.settings.myLocationButton = true 。 该按钮将出现。

缩放控制 (Zoom controls)

Google Maps SDK for iOS doesn’t provide inbuilt zoom controls (but the Android SDK does). You will need to write your own logic instead.

适用于iOS的Google Maps SDK不提供内置的缩放控件(但Android SDK提供)。 您将需要编写自己的逻辑。

All you need to do is add two buttons with ‘+’ and ‘-’ icons. When tapped, these will call mapView.animate(toZoom: zoom).

您需要做的就是添加两个带有“ +”和“-”图标的按钮。 点击时,它们将调用mapView.animate(toZoom: zoom)

控制手势 (Control gestures)

You can turn on or off any gesture that you can see on the map. For example, you might want to disable zooming, or turn off scrolling.

您可以打开或关闭在地图上可以看到的任何手势。 例如,您可能要禁用缩放或关闭滚动。

There are a total of four gestures available to you:

您总共可以使用四种手势:

mapView.settings.scrollGestures = falsemapView.settings.zoomGestures   = falsemapView.settings.tiltGestures   = falsemapView.settings.rotateGestures = false

I hope that you have enjoyed this tutorial. If you want to read more on Google Maps SDK for iOS, write me a comment. I would be very happy to expand this tutorial with your requests.

希望您喜欢本教程。 如果您想了解有关iOS版Google Maps SDK的更多信息,请给我评论。 我很高兴根据您的要求扩展本教程。

这是本教程中的内容,如果对您有帮助,请? 或分享这个故事,以便其他人可以找到它。 感谢您的关注! ? (That’s it from this tutorial and if it helped you please ? or share this story so others like you can find it. Thank you for your attention! ?)
查看我的最新项目: (Check out my latest project:)

‎1x2 BET - Soccer Tips & Odds‎HOT ODDS Each day, we generate a list of the hottest odds in the world. These are odds that have dropped the most…apple.co

1x2赌注-足球技巧和赔率 热门 赔率 每天,我们生成世界上最热门赔率的列表。 这些赔率跌幅最大…… apple.co

阅读我在Medium上撰写的更多文章: (Read more of my writing on Medium:)

Introducing Clean Swift Architecture (VIP)Forget MVC, now!hackernoon.comYour ultimate guide to the Google Maps SDK on iOS, using Swift 4Many iOS apps use Google Maps. This is a very common feature, so I have decided to prepare an ultimate guide on the…medium.freecodecamp.orgSWIFT — Custom UIView with XIB fileCustom UIView with XIB file is a very common practice in iOS Development. Custom UIView classes don’t contain XIB files…medium.comHow to add Spotlight support to your iOS appA Swift tutorial that will make your app available in Spotlight searchhackernoon.comCore Data RelationshipsUnderstanding One-to-One and One-To-Many relationshipshackernoon.comUnderstanding Auto Layout in Xcode 9All you need to know about Auto Layouthackernoon.com

现在介绍Clean Swift Architecture(VIP) 忘记MVC! hackernoon.com 使用Swift 4的 iOS 上Google Maps SDK的终极指南 许多iOS应用程序都使用Google Maps。 这是一个非常常见的功能,因此,我决定在...上准备一个最终指南 。medium.freecodecamp.org SWIFT —带有XIB文件的 定义UIView是带有XIB文件的 自定义UIView在iOS开发中很常见。 自定义UIView类不包含XIB文件… medium.com 如何向iOS应用程序添加Spotlight支持 一个Swift教程,可使您的应用程序在Spotlight搜索中 hackernoon.com 核心数据关系 了解一对一和一对一-许多关系 hackernoon.com 了解Xcode 9中的自动版式 您需要了解的有关自动版式 hackernoon.com的所有信息

订阅我的时事通讯: (Subscribe to my Newsletter:)

翻译自: https://www.freecodecamp.org/news/how-you-can-use-the-google-maps-sdk-with-ios-using-swift-4-a9bba26d9c4d/

微信sdk swift版

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值