简介
ionic2-gmap 是一个基于 Ionic 2 框架的 Google Maps 整合插件，使用这个插件可以方便地将 Google Maps 加入 Ionic 2 应用中。
本篇文章将会详细介绍如何使用 ionic2-gmap 包，包括安装、初始化、配置、使用等方面。
安装
在使用 ionic2-gmap 包之前，需要先安装相应的依赖包。
在 Terminal 中执行以下命令：
npm install @ionic-native/core @ionic-native/google-maps
这里的 @ionic-native/core 是 Ionic Native 的核心库，而 @ionic-native/google-maps 则是 ionic2-gmap 的核心库。
在安装完成之后，还需要在 app.module.ts 文件中，导入并添加以下代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------------------
-----------
---
---------- -
---
----------
-
---
--
------ ----- --------- --这样，在 app.module.ts 中，就可以通过 GoogleMaps 服务访问 ionic2-gmap 包了。
初始化
在使用 ionic2-gmap 包之前，需要先初始化 Google Maps API。
首先，在 Google Developers Console 中，创建一个新的项目，并在该项目中，创建 API 密钥，并启用 Maps JavaScript API、Geocoding API 和 Places API。
然后，在 Ionic 2 的 app.component.ts 中，导入并添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------- ---------- ---------------- ------- --------------- -------------- ------ - ---- ----------------------------
------------
------------ ----------
--
------ ----- ----- -
----------------- ----------- -----------
---- ----------
------------------ --------- --------- ------- ----------- ----------- -
------------------------ -- -
---------------
---
-
--------- -
--- ------- - ------------------------------
-------- - --------------------------------
----------------------------------------------- -- -
---------------- -- ---------
---
-
-这个代码会在应用启动时，创建一个 Google Maps 对象，并将其添加到 HTML 中的 id 为 map 的元素中。
当 Google Maps 对象准备好之后，应用控制台将会输出 “Map is ready!” 的信息。
配置
在初始化之后，还需要进行一些配置，以便于在 Ionic 2 应用中使用 Google Maps。
首先，在 Google Developers Console 中，为应用设置授权域名。这可以通过在 Google Developers Console 中，找到自己的项目，点击 “APIs & auth -> Credentials -> 编辑OAuth客户端ID” 进行设置。
然后，在 Ionic 2 项目的 config.xml 文件中，添加以下代码：
<plugin name="cordova-plugin-googlemaps" spec="~1.4.0">
<variable name="API_KEY_FOR_ANDROID" value="填入 Android 包名的 API key" />
<variable name="API_KEY_FOR_IOS" value="填入 iOS 的 API key" />
<variable name="PLAY_SERVICES_VERSION" value="11.0.1" />
<variable name="ANDROID_SUPPORT_V4_VERSION" value="24.0.0+" />
</plugin>这个配置将会为应用添加 cordova-plugin-googlemaps 插件，并配置相应的 API key。
需要注意的是，API_KEY_FOR_ANDROID 和 API_KEY_FOR_IOS 分别对应于 Android 和 iOS 平台下，为应用设置的 Google Maps API key。
使用
在完成上述配置之后，就可以在 Ionic 2 应用中使用 Google Maps 了。
下面是一个简单的示例代码，用于在 Google Maps 中标注一个地点：
-- -------------------- ---- -------
------ - ----------- ---------- ---------------- ------- --------------- -------------- ------ - ---- ----------------------------
---
--------------------
------ --------
----- -------
---------- -------
--------- -
---- -----------
---- -----------
-
-------------- -- -
------------------------
---这个代码会在地图上标注一个位置，并在该位置上显示一个信息窗口，该信息窗口中会显示 “Ionic” 的标题。
在实际使用 ionic2-gmap 包时，还可以通过类似上述示例代码的方式，对 Google Maps 进行更加详细和高级的操作。
总结
本文介绍了如何使用 npm 包 ionic2-gmap，首先从安装和初始化入手，然后对配置和使用进行了详细的介绍，并提供了一个简单的示例代码，用于在 Google Maps 中标注一个地点。
通过本文的学习，读者可以轻松地在 Ionic 2 应用中，快速完成 Google Maps 的集成和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a3781e8991b448d7d9e